CSS/Eigenschaften/background-position

Die Eigenschaft background-position bestimmt, an welcher Stelle sich eine bestimmte Ecke des Hintergrundbildes befinden soll, in Bezug auf die gleiche Ecke des Elements, in dem sich das Hintergrundbild befindet.

erlaubte Werte	Positionsangaben als Länge, Prozentwert oder Schlüsselwort left, center oder right für die X-Ausrichtung. top, center oder bottom für die Y-Ausrichtung Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: 0 0 (linke, obere Ecke)
anwendbar auf	alle Elemente
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

body {
  background-image: url(...);
  background-position: right;
}

Das Hintergrundbild wird rechtsbündig positioniert.

Beachten Sie: Die erlaubten Werte bestehen aus einer Angabe für die X-Ausrichtung und einer Angabe für die Y-Ausrichtung. Die Ausrichtung kann durch ein Schlüsselwort angegeben werden, oder durch eine Längen- oder Prozentangabe.

• Wird eine der beiden Ausrichtungen durch eine Längen- oder Prozentangabe angegeben, muss die X-Ausrichtung als erstes genannt werden.
• Wird nur eine Ausrichtung als Längen- oder Prozentangabe angegeben, ist es die X-Ausrichtung. Die Y-Ausrichtung ist dann center
• Werden beide Ausrichtungen als Schlüsselwort angegeben, kann optional (außer bei center) ein Offset hinzugefügt werden. Da die Schlüsselworte für X- und Y-Ausrichtung unterschiedlich sind, ist die Reihenfolge hier frei.
• Wird das Schlüsselwort center verwendet, ist der Bezugspunkt nicht mehr eine Ecke, sondern der Mittelpunkt der Seite, entlang der ausgerichtet wird.

Prozentwerte beziehen sich auf die Differenz zwischen Element- und Bildbreite. Ist ein Element beispielsweise 600px breit und das Hintergrundbild 350px, so sind noch 250% zu verteilen. Eine X-Ausrichtung von 70% würde bedeuten, dass 70% dieser 350px links vom Hintergrundbild liegen.

Eine ausführlichere Beschreibung findet sich im unter „Siehe auch“ verlinkten CSS Tutorial

Weblinks

• Spezifikation (W3C): background-position

Siehe auch

• CSS/Tutorials/Hintergrund/Sprites