Farbverlauf
Um für einen Bereich einen Hintergrund-Farbverlauf zu erhalten, benötigt man eine Hintergrundgrafik. Diese ist so breit wie der zu füllende Bereich, jedoch reichen wenige Pixel Höhe, theoretisch reicht einer.
Folgende Zeile erzeugt einen Farbverlauf, wobei die entsprechende Grafik url(...) natürlich vorhanden sein muss:
background: rgb(0,132,215) url(../pics/bg_body.gif) repeat-y;
rgb() ist eine alternative Angabe zur Hintergrundfarbe. Diese sollte bei linker Anordnung des Hintergrundbildes (Standardwert) mit dem Farbton am äußersten rechten Rand der Grafik identisch sein. Diese wird nämlich in x-Richtung (horizontal) nur einmal angezeigt, also nicht gekachelt (kein repeat-x), und geht somit nahtlos in die Hintergrundfarbe über, falls die Grafik schmaler ist als der zu füllende Bereich. In y-Richtung (vertikal) wird sie wiederholt (repeat-y).
Hier wird das Hintergrundbild rechts angeordnet:
background: #00265c url(../pics/gradient4.jpg) repeat-y right;
Durch Hintergrundbilder mit Farbverlauf können interessante Effekte entstehen, wie z.B. unten beim Übergang der Fusszeile in den Body.
Siehe auch unter Hintergrundbilder.
Sollte gerade kein Grafikprogramm verfügbar sein, leistet der Onlinedienst dynamicdrive hierfür gute Dienste.
