Mehrere Hintergrundbilder

  • Haben Sie schon einmal versucht, mehrere Hintergrundbilder für eine Webseite zu definieren? Zwar ist es möglich, mehrere Grafiken im <body>-Tag zu definieren, doch Wirkung zeigt das nicht. Einige Browser können ein Hintergrundbild auch über den <html>-Tag anzeigen, doch auch damit sind mehrere Hintergrundgrafiken noch immer nicht möglich. Aber mit diesem Trick funktioniert es: Sie benötigen neben der üblichen Definition im <body>-Bereich zwei CSS-Layer. Der erste nimmt Hintergrundbild Nummer zwei auf, der zweite den kompletten Inhalt der Seite. Damit dieser das Hintergrundbild überlagert, muss der Z-lndex korrekt definiert werden. Außerdem ist das Abschalten der Ränder über den <body>-Tag wichtig, sonst schließt die Grafik nicht direkt an den Rand des Browserfensters an. Wer den Einsatz von Layern, der nie ganz ohne Risiken ist, umgehen möchte, kann den Trick auch mit einer Tabelle versuchen: <body style=" background-image: url(bild.gif); background-repeat: no-repeat; background-position: bottom right; margin: Opx;"> <div style="position: absolute; z-index: 1;"> <img src="bild.gif"> </div> <div style="position : absolute; z-index: 2;"> HIER IST DER INHALT DER SEITE! </div>