background-position
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die linke obere Ecke eines Hintergrundbilds (definiert mit background-image) wird per Standardwert immer bündig an der linken oberen Ecke des Elements ausgerichtet (padding mit eingerechnet), dem es zugewiesen wird. Mit der Eigenschaft background-position kann für das Hintergrundbild eine andere Position definiert werden.
Vererbt: nein
Siehe auch: background-image
Werte
Eine einzelne Positionsangabe oder zwei Positionsangaben durch Leerzeichen getrennt. Die Position kann in jeder in CSS gültigen Maßeinheit (zum Beispiel in Pixel, Punkt, Millimeter oder Prozent) angegeben werden. Alternativ können die Konstanten aus der folgenden Tabelle eingesetzt werden.
Tabelle: Wertkonstanten für background-position.
| Vertikal | Horizontal |
|---|---|
| top center bottom | left center right |
Wird für background-position nur ein Wert angegeben, bezieht er sich auf die horizontale Positionierung, und die vertikale Positionierung erhält automatisch den Wert 50%. Bei der Angabe von zwei Werten beschreibt der erste die horizontale und der zweite die vertikale Position des Hintergrundbilds. Der Einsatz von negativen Werten ist zulässig, aber in der Praxis nicht sinnvoll.
Wird als Wert nur eine Konstante angegeben, wird die andere Dimension automatisch auf center gesetzt.
Die Kombination von absoluten und relativen Maßangaben ist zulässig, nicht jedoch die Kombination von Maßangaben und Konstanten.
Standardwert: 0 0
Kompatibilität
CSS-Version: 2
Funktioniert in Internet Explorer ab Version 4, Netscape ab Version 6, Opera und Mozilla.
Der Internet Explorer 4 für Windows erzeugt mit background-position einen Fehler bei der Verarbeitung der Eigenschaft background-repeat.
Beispiele
Folgende Stilregel erzeugt eine zentrierte Darstellung des Hintergrundbilds in body:
body {
background-position: center;
}Folgende Stilregeln richten das Hintergrundbild bündig an der unteren rechten Ecke von body aus:
body {
background-position: 100% 100%;
}
body {
background-position: bottom right;
}Folgende Stilregel erzeugt eine horizontale Positionierung des linken Bildrands in einer Entfernung von 20 Pixel vom linken Rand des body-Elements. Vertikal wird das Hintergrundbild zentriert dargestellt:
body {
background-position: 20px;
}Folgende Stilregel erzeugt eine horizontal zentrierte Darstellung des Hintergrundbilds und eine vertikale Positionierung des obere Bildrands in einer Entfernung von 20 Pixel vom oberen Rand des body-Elements:
body {
background-position: 50% 20px;
}Die folgende Stilregel ist nicht erlaubt, weil in der Deklaration von background-position eine Maßangabe mit einer Konstante kombiniert wird:
body {
background-position: 20px center; /* Das geht nicht! */
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg