[HTML] Zwei Hintergrundbilder für deine Webseite

Veröffentlicht am 4. August 2010 / 1272 Leser / 1 Kommentar

[HTML] Zwei Hintergrundbilder für deine Webseite

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.

Darf ich dir noch diese Artikel ans Herz legen?

[WordPress] Mehrere Sidebars nutzen vom 19. Mai 2012
[WordPress] Mein neues Theme ‘ZWEI’ vom 9. Mai 2012
[WordPress] ‘EINS’ – Mein erstes WordPress-Theme vom 23. April 2012
[CSS3] Ein horizontales Dropdown-Menü erstellen vom 18. April 2012
[CSS3] Die Pseudo-Klasse :target im Detail vom 12. April 2012

Kategorien

Webdesign

1 Kommentar

↓ Kommentieren

Bob sagt:

17. Oktober 2010 um 16:13

Das, was Du hier beschreibst, hat mir einen Quantensprung vorwärts verschafft. Ich hab das zwar vertikal genutzt, aber eben mit Erfolg. Dankeschööön! Die Lösung ist so simpel wie genial, wenn man einen farbigen Balken horizontal bündig oben platzieren muss (per body-Hintergrund) und einen gleichfarbigen Balken bündig links komplett mit Fensterhöhe platzieren muss. Prima! Schönen Sonntag!!

Antworten