Mehrere Hintergrundbilder mit DIV und CSS

3. Oktober 2010 Keine Kommentare

Jeder hat sich sicher schon gewünscht mehrere Hintergrundbilder verwenden zu können.

Dabei ist die Lösung so simpel, wie die Idee:

Man legt einfach ein DIV um den gesamten Body! Allerdings sollte die Homepage genug Content haben, denn das DIV-Element ist auch nur so groß, wie der Bereich, den der Content einnimmt + evtl. margin und padding!

Das DIV-Element hat die class “secondbg”. So können wir diesem speziellen DIV seine eigenen Anweisungen geben. Mit CSS-Anweisungen (im head geht das am übersichtlichsten!) sieht der Source-Code so aus:

Unser Browser interpretiert das ganze nun so (Der goldene Hintergrund gehört zum Body. Die Flasche gehört zum div).

Jetzt fehlen nur noch passende Anweisungen, wie z.B. background-position:

Fertig! Die Ausgabe des Browsers:

Hier der gesamte Code:

<html>
  <head>
    <title>TITEL UNSERER SEITE</title>
    <style type="text/css">
    body {
      background-image : url('bg.jpg');
    }
    div.secondbg {
      background-image : url("bg2.png");
      background-position : center;
      background-repeat : no-repeat;
      background-attachment : fixed;
      color:white;
    }
    </style>
  </head>
  <body>
    <div class="secondbg">
      CONTENT
    </div>
  </body>
</html>

Natürlich kann man die Namen und CSS-Anweisungen nach seinen Wünschen anpassen!

In diesem Beispiel fehlen natürlich nach wichtige Sachen, wie zB. DocType und meta-angaben.

CONTENT ist halt alles was so im BODY normalerweise drin ist. Eure Homepage also.

Tipp: Es sieht sehr schick aus wenn euer Logo links oder rechts unten mit background-attachment : fixed; zu sehen ist. Und da es im Hintergrund ist kann es keiner klauen! Das funktioniert wiederum natürlich nur wenn der Content-bereich genug Platz einnimmt.