CSS 2.1: `background-position`

Erläuterungen

Die Eigenschaft background-position ist ein Teil der Kurzschrift- Eigenschaft background. Sie definiert die Ursprungsposition einer Hintergrundgrafik. An dieser Position wird ein einfaches Hintergrundimage abgebildet. Wenn für background-repeat nicht no-repeat notiert ist, werden alle Wiederholungen der Grafik von diesem Ursprung ausgehend berechnet. Diese Position wurde in CSS 1 relativ zur Außenkante des Inhalts des Elements berechnet, in CSS 2.1 dient die Außenkante der padding-Fläche als Anhalt. (Siehe hierzu die Grafik im Artikel 'Das Box- Modell'.)

Als Beispiel kann man sich hier die Kachelung eines Fußbodens vorstellen: die erste Fliese lässt sich an einer beliebigen Stelle auslegen, am Rand, in einer Ecke oder in der Mitte. Alle anderen Kacheln werden daran angeschlossen.

Alle Hintergrundeigenschaften unterlegen die Fläche des Inhalts eines Elements, die padding-Fläche und die durch den Rahmen eines Elementes belegte Fläche.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'background-position' [ [ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ]? ] |
[ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Funktionsdiagramm der Eigenschaft 'background-position'.

Prozentwerte

Ein oder zwei anteilige Werte, mit denen der Abstand der Hintergrundgrafik von der oberen linken Ecke des Elementes festgelegt wird. Sind zwei Werte notiert, definiert der erste den Horizontalabstand, der zweite den Vertikalabstand. Ist nur ein Wert gegeben, steht dieser für beide Achsen. Der Bezugspunkt innerhalb der Hintergrundgrafik ist dabei nicht die obere linke Ecke, sondern ein Punkt, der ebenfalls durch die Werte x% y% bestimmt wird:

Zunächst wird der Punkt des aktuellen Elements berechnet, der x Prozent von dessen linkem Rand und y Prozent von dessen oberem Rand entfernt ist (in der Illustration rot dargestellt, das aktuelle Element ist BODY).
Dann wird der Punkt der Hintergrundgrafik berechnet, der x Prozent von deren linkem Rand und y Prozent von deren oberem Rand entfernt ist (in der Illustration blau dargestellt).
Die Hintergrund-Grafik wird dann so plaziert, dass beide Punkte zur Deckung kommen.

So wird gewährleistet, dass bei der Angabe 100% 100% die Ursprungsgrafik noch innerhalb des Elementes liegt.

Negative Werte bewirken, dass die Ursprungsposition der Hintergrundgrafik nach links bzw. oben aus der Elementfläche hinausgeschoben wird. Die Spezifikation erlaubt aber, dass Browser negative Werte ignorieren.

Einen ähnlichen Effekt erzielt man, wenn die Hintergrundgrafik breiter bzw. höher als das Browserfenster ist. Gibt man größere Prozentwerte an, liegt der Ursprung der Hintergrundgrafik weiter links bzw. oben.

Wiederholung und Positionierung einer Hintergrundgrafik innerhalb von Inline- Level- Elementen sind nicht definiert. Die Position der Hintergrundgrafik orientiert sich an der padding-Kante eines Elements. Da Elemente im Kontext zur Inline- Formatierung kein padding besitzen, ist die Position des Hintergrundes in diesen Elementen nicht definiert.

Längenwerte

Ein oder zwei absolute Werte, mit denen der Abstand der linken oberen Ecke der Hintergrundgrafik von der linken oberen Ecke des Elementes festgelegt wird. Sind zwei Werte notiert, definiert der erste den Horizontalabstand, der zweite den Vertikalabstand. Ist nur ein Wert gegeben, steht dieser für beide Achsen. Längenwerte verschiedener Einheiten können untereinander ebenso wie mit Prozentwerten gemischt werden, nicht aber mit Schlüsselworten.

Schlüsselworte

Ein oder zwei Schlüsselworte, die die Positionierung der Hintergrundgrafik innerhalb eines gedachten 3×3-Rasters erlauben. Ist nur ein Wert gegeben, wird der andere mit center besetzt. Die Reihenfolge der horizontal/ vertikal- Schlüsselworte spielt keine Rolle.

Schlüsselworte dürfen mit Prozentwerten oder mit Längenangaben gemischt werden — mit einer Ausnahme: left und right dürfen in solchen Kombinationen nur als erster Wert notiert werden, top und bottom dürfen nur als zweiter Wert erscheinen.

top : Vertikale Ausrichtung der Hintergrundgrafik, sodass ihre obere Kante sich mit der oberen Kante des zugehörigen Elements deckt.
bottom : Vertikale Ausrichtung der Hintergrundgrafik, sodass ihre untere Kante sich mit der unteren Kante des zugehörigen Elements deckt.
right : Horizontale Ausrichtung der Hintergrundgrafik, sodass ihre rechte Kante sich mit der rechten Kante des zugehörigen Elements deckt.
left : Horizontale Ausrichtung der Hintergrundgrafik, sodass ihre linke Kante sich mit der linken Kante des zugehörigen Elements deckt.
center : bewirkt, dass die Mitte der Hintergrundgrafik sich mit der Mitte des zugehörigen Elements deckt. Dieser Wert kann für horizontale und vertikale Ausrichtung verwendet werden. Es gibt kein Schlüsselwort 'middle'.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

BODY {background-position: top;} P {background-position: 8em 50%;}

P {background-position: right 50%} /* korrekt */

P {background-position: top 50%;} /* Falsch! */

P {background-position: 8em top} /* korrekt */

Browserunterstützung

Die Eigenschaft background-position wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6, IE 7: IE/Win behandelt den Wert inherit wie den Doppelwert 'top left'.
Für Inline-Level-Elemente mit Zeilenumbruch stellt IE/Win die Werte left und right falsch dar. In dem Fall bewirkt der Wert left, dass eine Hintergrund- Graphik nicht am Anfang des deklarierten Elements erscheint, sondern an dem Punkt, der physikalisch am weitesten links liegt, d. h. nach dem Zeilenumbruch. Dasselbe gilt analog umgekehrt für den rechten Rand.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

background, background-attachment, background-color, background-image, background-repeat

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Hintergrundeigenschaften werden von den meisten Mobilgeräten nicht dargestellt und es muss auch aufgrund der eingeschränkten Farbwiedergabe von der Verwendung dieser Eigenschaften in Stylesheets für handheld abgeraten werden.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`0% 0%`	Absolute Länge oder ein `%`-Wert	Nein	Block-Level- und replazierte Elemente	Box des zugehörigen Elementes	Visual

Ausblick:

Sollten künftige CSS-Versionen einmal implantiert werden, lässt sich auch bestimmen, wie der Ursprung der Hintergrundgrafik berechnet wird: ausgehend von der Kante des Inhalts, des padding-Bereiches oder des Rahmens.