• 4. August 2010
  • 1
  • Webdesign
  • [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.

    1 Kommentar

    • Bob sagt:

      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!!

    Dein Kommentar