Stil mit {stil}

Nov 2008

Colors und Backgrounds – background-position – Position des Hintergrundbilds

Die anfängliche Position eines Hintergrundbilds background-position kann als Prozent- oder Längenangabe (z.B. in Pixel) auf der horizontalen und vertikalen Achse oder durch Schlüsselwörter (z.B. »bottom right«) angegeben werden.

body { background: url(champ.gif) center center; }

Dabei ist jede Kombination aus Prozentangaben und Längen möglich. Alternativ kann eines der Schlüsselwörter [top, center, bottom] und/oder [left, right, center] als Position notiert werden. Negative Längenangaben sind erlaubt und Schlüsselwörter dürfen seit CSS 2.1 mit Prozentangaben und Längenangaben gemischt werden (z.B. "center 10%").

Was nicht geht: Ein »Kacheln« des Hintergrundes, etwa in der Form: Setze dieses Hintergrundbild drei mal in die Mitte und dann wiederhole die Sequenz in der Vertikalen oder fülle den Hintergrund auf einer Breite von 70% der Box.

• color
• background-attachment
• background-color
• background-image
• [ background-position ]
• background-repeat
• background

background-position

IE4+ N6 M1 O5+ S1 CSS1 Erblich: Nein

background-position

background-position legt die anfängliche Position des Hintergrundbildes fest.

Werte

top left top center top right center left center center center right bottom left bottom center bottom right	Wenn nur ein Schlüsselwort angegeben wird, ist das zweite Schlüsselwort automatisch »center«
x% y%	Der erste Wert beschreibt die horizontale und der zweite die vertikale Position. 0% 0% ist die Vorgabe und entspricht der Ecke oben links. 100% 100% ist die Ecke unten rechts. Wenn nur ein Wert angegeben wird, ist der zweite Wert automatisch 50%.
x y	Der erste Wert beschreibt die horizontale und der zweite die vertikale Position. 0 0 ist die Ecke oben links. Die Maßeinheit ist Pixel (0px 0px) oder jede beliebige andere Maßeinheit. Wenn nur ein Wert angegeben wird, ist der zweite Wert automatisch 50%.

zurück zum Seitenanfang