CSS 2.1 ::Referenz ::Eigenschaften
CSS 2.1: background
Erläuterungen
Die Eigenschaft background dient der Deklaration der Hintergrundeigenschaften und ist eine Zusammenfassung der Eigenschaften background-color, background-image, background-repeat, background-attachment und background-position.
Tipp:
Große Tabellen werden leicht unübersichtlich, besonders wenn der Besucher das Browser- Fenster etwas weiter aufzieht und die einzelnen Spalten sich dadurch verbreitern. Zur Abhilfe können wir den Hintergrund der Tabellenreihen, d h. am Element tr, verwenden. Per tr:hover deklarieren wir einen besonderen Hintergrund für die Reihe, über die gerade der Cursor fährt. Das macht es einfacher, lange Reihen zu erkennen und vermittelt dem Besucher einen gewissen interaktiven Eindruck.
Alle deklarierten Hintergrundeigenschaften gelten nicht nur für die Fläche des Inhalts eines Elements, sondern auch für die durch padding und durch den Rahmen eines Elementes belegte Fläche. Die Rahmenzeichnung deckt den Hintergrund vollständig ab, wenn nicht das Muster des Rahmens mit einem der Werte dotted, dashed oder double deklariert wurde. Seinen eigenen Weg geht hier einmal mehr IE/Win, der die Hintergrundeigenschaften nur bis zur padding-Außenkante darstellt.
Die Hintergrundwerte müssen nicht in einer bestimmten Ordnung angegeben werden. Es ist auch nicht zwingend erforderlich, Werte für jede der fünf Eigenschaften anzugeben.
Man sollte aber beachten, dass hier nicht definierte Eigenschaften den Ausgangswert zugeordnet bekommen. Das heißt, dass Werte, die man vorher bereits mit Hilfe der einzelnen Eigenschaften zugeordnet hat, zurückgesetzt werden, solange sie keine höhere Spezifizität aufweisen.
So funktioniert es z. B. nicht, wenn man zuerst das Hintergrundbild per background-image zuweist, dann die Angaben zu Wiederholung, Scrollverhalten und Ursprung per background definiert. Durch die zweite Angabe wird die Angabe zum Hintergrundbild auf den Ausgangswert 'none' zurückgesetzt.
Um zu zeigen, wie das alles in der Praxis aussehen kann, hier eine kleine Demo — bitte nach unten scrollen.
Erlaubte Werte
Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):
'background'
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] | inherit
- <
background-attachment> - Angaben zu Positionierung und Scrolling eines Hintergrundbildes.
- <
background-color> - Hintergrundfarbe.
- <
background-image> - Name und Pfad zu einer Grafik, die als Hintergrund gezeigt werden soll.
- <
background-position> - Plazierung eines einzelnen Hintergrundelementes oder des Ursprungselementes.
- <
background-repeat> - Richtung, in der ein Hintergrundbild wiederholt wird.
inherit- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel:
Deklaration aller fünf Werte:
BODY { background: #ccc url(/graphics/image.jpg) fixed repeat-y 250px 10%; }
Quizfrage: von den folgenden drei Beispielregeln sind zwei gleichwertig - welche?
P { background: transparent url(/graphics/image.jpg) scroll repeat 0% 0%; }
P { background: url(/graphics/image.jpg); }
P { background-image: url(/graphics/image.jpg); }
Antwort: Die ersten beiden sind gleichwertig, da sie beide ein Hintergrundbild definieren und alle anderen Eigenschaften auf ihre Ausgangswerte zurücksetzen. Nr. 3 unterscheidet sich von Nr. 2 dadurch, dass dort nur ein Hintergrundbild definiert wird, die anderen Eigenschaften aber unberührt bleiben.
Browserunterstützung
Die Eigenschaft background wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:
- IE/Win 5.x, IE/Win 6, IE 7
- MS IE/Win bis Version 7 hat einzelne Probleme, die bei den entsprechenden
background- Eigenschaften erläutert sind.
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-attachment, background-color, background-image, background-position, 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): |
|---|---|---|---|---|---|
| Siehe bei den individuellen Eigenschaften | Siehe bei den individuellen Eigenschaften | Nein | Auf alle Elemente | Nur für background- position |
Visual |
Ausblick:
Für die Zukunft sind in CSS3 einige weitere Optionen zur Festlegung der Hintergrundgrafik vorgesehen. So soll es z. B. möglich werden, die genaue Anzahl der Wiederholungen, einen Maßstabsfaktor für die Grafik oder die Breite der Zwischenabstände anzugeben.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.
