CSS 2.1 · Eigenschaft
CSS-Eigenschaft background-image
Vollreferenz zu background-image: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.
background-image.probe { background-image: url(/graphics/css-bullet.gif); }
Erläuterungen
Die Eigenschaft background-image ist ein Teil der Kurzschrift- Eigenschaft background. Sie definiert die Hintergrundgrafik eines Elements. Das Hintergrundimage ist nicht skalierbar, es wird immer in 100% Größe dargestellt. Ist für das Element bereits eine Hintergrundfarbe notiert worden, wird sie durch das Hintergrundbild überdeckt. Transparente Teile der Hintergrundgrafik lassen die Hintergrundfarbe oder den Hintergrund eines Ahnenelements 'durchscheinen'. Teil-opake Grafiken, z. B. im PNG-Format, bilden die endgültige Farbe der Grafik mit Hilfe der gegebenen Hintergrundfarbe oder mit dem Hintergrund des Elternelements.
Webautoren sollten stets zusätzlich zur Hintergrundgrafik eine Hintergrundfarbe angeben, die dann dargestellt wird, wenn das Image aufgrund eines Fehlers nicht zur Verfügung steht. Dadurch wird zwischen Schrift und Hintergrund ein gewisser Kontrast bewahrt und das Dokument bleibt lesbar.
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-image' <uri> | none | inherit
<URI>- Pfadangabe zur Grafikdatei, die als Hintergrund gesetzt werden soll. Es kann eine vollständige oder eine relative Pfadangabe sein. Diese Angabe steht in runden Klammern. Ist die angegebene Datei keine Grafikdatei, wird nichts ausgegeben.
none(Ausgangswert)- Es wird kein Hintergrundbild dargestellt.
inherit- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel
BODY {background-image: url(/graphics/image.jpg);}
Browserunterstützung
Die Eigenschaft background-image wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:
- IE/Win 5.x, IE/Win 6, IE 7
- IE/Win ignoriert den Wert
inherit.
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-position, background-repeat
Woher der Pfad gerechnet wird
Eine relative Pfadangabe in einem Stylesheet bezieht sich auf den Ort des Stylesheets, nicht auf den des Dokuments. Das ist der verbreitetste Fehler beim Umsortieren von Dateien: das Stylesheet wandert in einen Unterordner, das Dokument bleibt, und alle Hintergrundbilder fehlen.
Bei einem Stylesheet im Dokument gilt dagegen der Ort des Dokuments, denn dort liegt das Stylesheet. Derselbe Pfad kann also je nach Einbindung auf zwei verschiedene Dateien zeigen.
Ein zweiter Unterschied zum Bild im Dokument betrifft das Layout: ein Hintergrundbild beansprucht keinen Platz. Das Element wird davon nicht größer, und ein Bild, das größer ist als das Element, wird beschnitten. Wer die Größe des Bildes braucht, braucht ein Bild im Dokument.
Bild und Farbe zusammen
Hintergrundfarbe und Hintergrundbild schließen sich nicht aus. Die Farbe liegt unter dem Bild, und sichtbar ist sie überall dort, wo das Bild nicht deckt: neben einem nicht gekachelten Bild, in durchsichtigen Bereichen und in der Zeit, bevor das Bild geladen ist.
Daraus folgt eine einfache Regel, die selten befolgt wird: Zu jedem Hintergrundbild gehört eine Hintergrundfarbe, die dem Bild ähnlich genug ist, damit der Text auch ohne das Bild lesbar bleibt. Das gilt für den Ladevorgang ebenso wie für den Fall, dass das Bild fehlt.
Später ist der Wertebereich erheblich gewachsen. Neben einer Pfadangabe stehen heute berechnete Bilder wie Verläufe, und mehrere Bilder lassen sich übereinanderlegen, wobei das zuerst genannte oben liegt. An der Rolle der Farbe hat sich nichts geändert: sie bleibt die unterste Schicht.
Zu bedenken ist bei alledem, dass ein Hintergrundbild nicht vorgelesen wird und in einer Textausgabe fehlt. Was Bedeutung trägt, gehört deshalb nicht in den Hintergrund; dort gehört hin, was den Text schmückt oder ihn vom Umfeld absetzt.
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.
- Ausgangswert
none- Berechneter Wert
- Absolute URI
- Vererbung
- no
- Anwendbarkeit
- Auf alle Elemente
- %-Bezugswert
- Nicht zutreffend
- Mediengruppe(n)
- Visual
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.