Ein Hintergrund mit doppeltem Farbverlauf mag zwar eine einfach erscheinende Idee sein, die Implementierung kann sich jedoch als schwieriger erweisen, als man denkt. Hier ein paar Tricks, wie man mit minimalem Aufwand ein gutes Ergebnis erzielen kann.
Die Aufgabenstellung für einen Hintergrund mit doppelten Farbverlauf ist Folgende: Ein weißer Hintergrund soll am linken und rechten Seitenrand, wie in Abbildung A[1], langsam zu grau werden. Wenn man mit einem Layout mit fester Seitenbreite arbeitet, ist der gewünschte Farbverlaufseffekt recht einfach zu erzielen: Hier braucht man nur ein Hintergrundbild mit der entsprechenden Breite, welches die Farbverläufe an den Rändern aufweist. Und dann muss man nur noch eine Style-Anweisung erstellen, welche dieses Hintergrundbild auf den body-Tag anwendet und vertikal wiederholt - das ist alles.
Die Herausforderung bei diesem Projekt besteht darin, dass das Layout flexibel ist. Das bedeutet: Der Hintergrund verändert sich zusammen mit dem Browserfenster in der Größe. Ein einzelnes Hintergrundbild würde diese Größenänderung nicht mitmachen, daher müssen separate Bilder für den linken und rechten Farbverlauf verwendet werden. Da jedes Seitenelement nur ein Hintergrundbild haben kann, bedarf es einiger Tricks, um einen Hintergrund zu erstellen, der zwei Hintergrundbilder enthält, das gesamte Browserfenster unabhängig vom Inhalt ausfüllt und auch noch in allen wichtigen aktuellen Browsern funktioniert. 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[2]) 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. Wie üblich besteht die eigentliche Herausforderung dieser CSS-Technik darin, die unerwarteten Macken und Probleme der Browser-Kompatibilität auszubügeln. In diesem Fall steht man vor folgenden Problemen:
- Der Farbverlauf auf der rechten Seite ist nur so hoch wie der Inhalt des main div-Elements. Eigentlich sollte er über die gesamte Höhe des Browserfensters gehen.
- Über dem Farbverlauf auf der rechten Seite ist eine Lücke, die dort eigentlich nicht hingehört.
- Die Höhe des rechten Farbverlaufs ist in unterschiedlichen Browsern nicht identisch.
Folgenden Änderungen am CSS-Code sind vorzunehmen um diese Probleme zu beheben:
Als Erstes wurde für die Hintergrundregeln die Kurzschreibweise gewählt. So ist zum Beispiel die left-top-repeat-y-Regel background:#FFFFFF url(bodywrapgrad.gif) in der body-Style-Anweisung nur eine kompaktere Möglichkeit, die folgenden Regeln zu schreiben: background-color:#FFFFFF; background-image:url(bodywrapgrad.gif); background-position:left top; background-repeat:repeat-y;.
Die zusätzliche Regel height:100% für das body-Element ist bereits die halbe Lösung um den Internet Explorer dazu zu bewegen, den rechten Farbverlauf über die gesamte Höhe des Browserfensters anzuzeigen. Die andere Hälfte dieser Lösung wäre eine entsprechende Regel (height:100%) für das #bkgnd2-div-Element. Leider beißt sich diese Regel mit der Höheneinstellung für andere Browser (height:auto), sodass ein zusätzliches Style-Element mit einem speziellen Selektor für den Internet Explorer erforderlich wird, um diesem seine nicht standardkonforme Regel für die Höheneinstellung beizubringen (* html #bkgnd2).
Aber das wahre Geheimnis, den rechten Farbverlauf dazu zu bringen, die gesamte Höhe des Browserfensters einzunehmen, besteht darin, das #bkgnd2-div-Element absolut zu positionieren (position: absolute). Ein solches absolut positioniertes div-Element verlangt natürlich Regeln für Positionierung (top:0px; right:0px) und Größe (width:100%). Die Regel min-height:100% stellt sicher, dass das div-Element samt seinem Hintergrund immer die ganze Höhe des Browserfensters ausfüllt, selbst wenn der Inhalt dies nicht tut. Und die Regel height:auto sorgt dafür, dass das div-Element auch den gesamten Inhalt umfasst, wenn dieser über die ursprüngliche Browserhöhe hinausgeht. Der Internet Explorer unterstützt das min-height-Attribut nicht, aber die Regel height:100% in der * html #bkgnd2-Style-Anweisung sorgt dort für einen ähnlichen Effekt.
Die Lücke über dem rechten Farbverlauf in Abbildung B wird durch ein Zusammenfallen der Ränder (margin collapse) verursacht: Der obere Rand des Überschrifttextes bricht aus den umgebenden div-Elementen aus und fungiert als Rand für das #bkgnd2 div-Element. Die Standardlösung, um diesen unerwünschten Effekt zu verhindern, besteht darin, das Element mit dem problematischen Rand mit einem Füllabstand oder einem Rahmen zu versehen. In diesem Fall löst ein Füllabstand von 1 Pixel (padding:1px) in der #main-Style-Anweisung das Problem.
Das Ergebnis (Abbildung C[3] und Abbildung A) erzielt den gewünschten Effekt unabhängig davon, wie viel Inhalt im #main-div-Element enthalten ist, und funktioniert in allen Browsern, die der Autor bislang getestet hat. (Hinweis: Dieser Code wurde mit den aktuellen Windows-Versionen von Internet Explorer, Firefox, Netscape, Mozilla und Opera getestet.)
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/