Hintergrundbild: `background-image`

Beispiel

Legt für ein Element ein Hintergrundbild fest. Da der Browser Hintergrundbilder immer über die Hintergrundfarbe legt, solltest du gleichzeitig eine Hintergrundfarbe angeben, die zu sehen ist, wenn der User das Anzeigen von Bildern ausgeschaltet hat oder das Bild einfach nicht zur Verfügung steht. So verhinderst du zu geringen Kontrast zwischen Schrift- und Hintergrundfarbe oder sogar Probleme wie weiße Schrift auf weißen Grund. Soweit du mit background-repeat nichts Anderes festgelegt hast, werden Hintergrundbilder immer über den gesamten Bereich des Inhalts und des Innenabstands angezeigt (siehe auch Workshop: Boxmodell).

<style type="text/css">
div.bg {
background-image: url(../images/bg.gif);
background-color:orange;
width:500px;height:200px;
border:1px solid red;
padding:20px;
}
</style>

...

<body>
<div class="bg">
  div-Container mit Hintergrundbild
</div>

Initialwert:	none
Vererbbar:	Nein
Anwendbar auf:	Alle Elemente
Medium:	Visual
Werte:	url() Dateiname und evtl. Pfad der Grafik. Wenn du deine Stylesheets in eine externe Datei auslagerst, musst du darauf achten, dass sich die Pfadangabe auf den Ort der Stylesheet- und nicht der XHTML-Datei bezieht. Befindet sich die Stylesheet-Datei z.B. im Verzeichnis css und das Hintergrundbild in images, so wäre die gültige Pfadangabe `background-image: url(../images/hintergrundbild.gif)` none Kein Hintergrundbild. Inherit