26.10.2008

Die Hintergrundgrafik wird nicht angezeigt

Wird die Hintergrundgrafik eines Elements nicht angezeigt, so lässt sich das recht einfach beheben.
Als Beispiel soll ein Div #header dienen, welchem eine Hintergrundgrafik mit der Dateibezeichnung "hintergrund.jpg" zugewiesen ist.

CSS:

#header {
background-image: url(hintergrund.jpg);
}

HTML:

<div id="header"></div>

Obwohl man meint alles richtig gemacht zu haben, wird die Grafik dennoch nicht angezeigt.
Der Grund ist ganz einfach: Div's nehmen automatisch die Größe ihres Inhalts an. Hat ein Element keinen Inhalt und wird es lediglich zur Darstellung einer Hintergrundgrafik verwendet, so wird die Grafik mit den genannten CSS-Angaben nicht dargestellt.

Entweder muss das Element einen Inhalt haben (z.B. Text) oder man muss ihm eine bestimmte Breite und Höhe zuweisen, sinnvollerweise mit den Abmaßen der darzustellenden Hintergrundgrafik.
Also ergänzen wir die CSS-Angaben um einen width- und height-Wert, welcher den Höhen- und Breitenangaben der Grafik entspricht. Im Beispielfall:

#header {
background-image: url(hintergrund.jpg);
width: 800px;
height: 80px;
}

Damit wird die Hintergrundgrafik auch dann angezeigt, wenn das Element selbst keinen Inhalt hat.
Sollte dies dennoch nicht klappen, dann ist zu prüfen, ob der Pfad zur Hintergrundgrafik (ausgehend vom "Standort" der CSS-Datei) stimmt und die Schreibweise von Pfad und Dateibezeichnung exakt übereinstimmen. Die Dateibezeichnung sollte auch weder Umlaute noch Sonderzeichen enthalten.

nach oben