Stil backgroundPosition Eigenschaft

Definition und Verwendung

backgroundPosition Eigenschaftseinstellungen oder Rückgabe der Position des Hintergrundbildes im Element.

Weitere Informationen:

HTML-Stil:background Eigenschaft

CSS Tutorial:CSS-Hintergrund

CSS3 Tutorial:CSS3 Hintergrund

CSS Referenzhandbuch:background-image Eigenschaft

CSS Referenzhandbuch:background-position Eigenschaft

Beispiel

Beispiel 1

Verändern Sie den Standort des Hintergrundbildes:

document.body.style.backgroundPosition = "top right";

Probieren Sie es selbst aus

Beispiel 2

Verändern Sie den Standort der Hintergrundbildposition im <div>-Element in die Mitte unten:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

Probieren Sie es selbst aus

Beispiel 3

Setzen Sie die Position des Hintergrundbildes im <div>-Element auf horizontal 200 Pixel und vertikal 40 Pixel:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

Probieren Sie es selbst aus

Beispiel 4

Rückgabe der Position des Hintergrundbildes im <div>-Element:

document.getElementById("myDiv").style.backgroundPosition;

Probieren Sie es selbst aus

Syntax

Rückgabe der Eigenschaft backgroundPosition:

object.style.backgroundPosition

Setzen Sie die Eigenschaft backgroundPosition:

object.style.backgroundPosition = value

Eigenschaftswert

Wert Beschreibung
  • oben links
  • oben mittig
  • oben rechts
  • mittig links
  • mittig mittig
  • mittig rechts
  • unten links
  • unten mittig
  • unten rechts
 Wenn Sie nur einen Schlüsselwort angeben, wird der andere Wert "center" sein.
x% y%

Der x-Wert stellt die horizontale Position dar, der y-Wert die vertikale Position.

Die obere linke Ecke ist 0%. Die untere rechte Ecke ist 100% 100%.

Wenn Sie nur einen Wert angeben, beträgt der andere 50%.
xpos ypos

Der x-Wert stellt die horizontale Position dar, der y-Wert die vertikale Position.

Der obere linke Ecke ist 0 0. Die Einheit kann Pixel (0px 0px) oder jede andere CSS-Einheit sein.

Wenn Sie nur einen Wert angeben, beträgt der andere 50%. Sie können % und Einheiten mischen.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: 0% 0%
Rückgabewert: Zeichenkette, die die Position des Hintergrundbildes angibt.
CSS-Version: CSS1

Browserunterstützung

backgroundPosition ist eine Eigenschaft von CSS1 (1996).

Es wird von allen Browsern vollständig unterstützt:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
unterstützt unterstützt unterstützt unterstützt unterstützt unterstützt