CSS: Hintergrund mit doppeltem Farbverlauf

Das Erzeugen des Hintergrunds mit doppeltem Farbverlauf für ein flexibles Layout wäre einfach, wenn man dem body-Tag zwei Hintergrundbilder zuweisen könnte: ein Bild für die linke Seite des body-Elements für den linken Farbverlauf und ein zweites Bild auf der anderen Seite für den rechten Farbverlauf. Die Farbverläufe würden immer den entsprechenden Seiten des Browserfensters zugewiesen werden, egal, wie sich die Breite des Hintergrunds ändern würde. So einfach geht es aber leider nicht.

Der body-Tag (wie auch alle übrigen Seitenelemente) kann nicht mit mehreren Hintergrundbildern versehen werden. Aber man kann diesen Effekt simulieren, indem man ein div-Element hinzufügt, welches als transparente Schicht über dem body-Element liegt. Sobald man über zwei Seitenelemente verfügt, mit denen gearbeitet werden kann, kann man das eine Hintergrundbild dem body-Tag zuweisen und das andere dem div-Element, um auf diese Weise den gewünschten Effekt mit zwei Farbverläufen zu erzielen. Um die Hintergrundbilder klein zu halten, sind sie jeweils nur wenige Pixel hoch und haben die für den Farbverlauf benötigte Breite. Die Bilder können bei Bedarf vertikal wiederholt werden um die Seite in der gesamten Höhe zu füllen.

Der XHTML-Code für diesen Effekt ist recht einfach. Es gibt nur ein div-Element (<div id=“bkgnd2″>) extra, welches in den Code zwischen dem body-Tag und dem Rest des Seiteninhalts eingefügt wird (<div id=“main“>).

Auch der CSS-Code für diese Technik fängt recht schlicht an:

Die body-Style-Anweisung fängt damit an, die Ränder und den Füllabstand auf null zu setzen (margin:0 und padding:0). Dann wird die Hintergrundfarbe auf weiß gesetzt (background-color:#FFFFFF), das Hintergrundbild für den linken Farbverlauf angegeben (background-image:url(bodywrapgrad.gif)), die Startposition für das Hintergrundbild mit der linken oberen Ecke der Seite festgelegt (background-position:left top) und angegeben, dass es vertikal wiederholt werden soll (background-repeat:repeat-y).

Die #bkgnd2-Style-Anweisung legt die entsprechenden Hintergrundeinstellungen für den rechten Farbverlauf fest. Die Hintergrundfarbe ist transparent (background-color:transparent), damit der Hintergrund vom body-Tag durchscheinen kann. Das Hintergrundbild (background-image:url(bodywrapgrad-reverse.gif)) für den rechten Farbverlauf ist ein Spiegelbild des linken Farbverlaufs. Das Hintergrundbild wird der rechten Seite des div-Elements zugewiesen (background-position:right top) und vertikal wiederholt (background-repeat:repeat-y) wie sein Gegenstück auf der anderen Seite. In diesem Beispiel wird der eigentliche Inhalt zentriert, daher enthält die #bkgnd2-Style-Anweisung die Regel text-align:center um das #main-div-Element in älteren Versionen des Internet Explorers zu zentrieren.

Die #main-Style-Anweisung formatiert das div-Element für den Hauptinhalt der Seite. Die Regeln in dieser Style-Anweisung haben keinen Auswirkungen auf den doppelten Farbverlauf.

Das Ergebnis (Abbildung B) ist schon ein guter Anfang, aber noch nicht ganz der gewünschte Effekt. Der Farbverlauf auf der linken Seite sieht gut aus, aber rechts muss noch etwas nachgebessert werden.