CSS background-position – Hintergrundbild positionieren

Mit der CSS Eigenschaft background-position ist es möglich die Position des Hintergrundbildes zu bestimmen.
Es kann oben (top), unten (bottom), links (left) und rechts (right) ausgerichtet werden, oder auch eine Längen- oder Prozentangabe übergeben werden. Es können auch 2 Angaben übermittelt werden. Beispiel: 150px 25% oder right bottom
Wichtig: Die Startposition wird mit background-position festgelegt, wie es sich aber wiederholen soll, wird immer mit background-repeat festgelegt.
Auch wird das Hintergrundbild nicht am padding ausgerichtet, da ein padding-Wert nur für den Inhalt zutrifft.

Beschreibung und Syntax zu CSS background-position

Beispiel 1:

div{
background-position: right;
background-repeat: no-repeat;
background-image: url('bild.jpg');
}

Beispiel 2:

div{
background-position: right;
background-repeat: no-repeat;
background-image: url('bild.jpg');
}

Vererbbar: ja

Initialwert: disc (ul-Elemente), decimal (ol-Elemente)
Werte: bottom (unten), center (zentriert), left (links), right (rechts), top (oben), Prozentangaben, Längenangaben
Beispiel Wertangaben:

• background-position: 10% 50px;
• background-position: 10px 1em;
• background-position: right bottom;

Der erste Wert legt den horizontalen Punkt fest, der zweite den vertikalen.