Immer mal wieder kommt der Wunsch nach zwei verschiedenen Hintergrundbildern für die eigene Webseite auf. Beispielsweise möchte man im Kopfbereich ein anderes Hintergrundbild als im Fußbereich.

Der Webseitenhintergrund wird generell im body-Tag deklariert. Möchte man zwei Hintergründe, ist dies derzeit nur über Umwege möglich, da einem Element lediglich ein Hintergrundbild (background) zugewiesen werden kann. Zwar ist es möglich dem html– und dem body-Tag jeweils ein anderes Hintergrundbild mitzugeben, dass wird aber leider von vielen Browsern nicht korrekt ausgewertet und dargestellt.

Künftig ist es wesentlich einfacher, denn mit der Einführung von CSS3 wurde die Möglichkeit geschaffen, einem Objekt, z.B. einem Div-Container mehrere Hintergrundbilder zuzuweisen. Dazu werden die Hintergrundbilder nacheinander durch Komma getrennt aufgelistet:

background-image: url(images/bg_header.png), url(images/bg_left.png);
background-position: top center, bottom center;

Aber bis dies alle Browser beherrschen und jeder Besucher eurer Webseite einen CSS3-kompatiblen Browser verwendet, wird es sicher noch ein Weilchen dauern. Bis dahin gilt es andere Möglichkeiten zu suchen.

Wie findet ihr folgende Lösung?

Legt zwei neue Div-Container (hier head_bg und footer_bg) an, die ihr direkt unter dem body einfügt. Der Aufbau eurer Webseite sollte sich dann so darstellen

<!DOCTYPE HTML PUBLIC ..."> ...
<html>...
<body>
<div id="head_bg">
<div id="footer_bg">
<div id="content">
<p>Hallo Welt</p>
</div> <!-- Ende div id="content" -->
</div> <!-- Ende div id="footer_bg" -->
</div> <!-- Ende div id="head_bg" -->
</body>
</html>

In eurem Stylesheet deklariert ihr das folgendermaßen:

#head_bg {
width:100%;
background: url(images/bg_head.png); }
#footer_bg {
width:100%;
background: url(images/bg_footer.png); }

Und wem zwei Hintergrundbilder immer noch nicht genug sind, legt weitere Div-Container mit Hintergrundbild an.