CSS 2.1: `background-image`

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

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.