Farbverläufe
... als Hintergrundbild
Um für einen Bereich einen Hintergrund-Farbverlauf zu erhalten, benötigt man eine Hintergrundgrafik. Diese ist (maximal) so breit wie der zu füllende Bereich, jedoch reichen wenige Pixel Höhe, theoretisch reicht einer.
Folgende Zeile erzeugt einen (diagonalen) Farbverlauf, wobei die entsprechende Grafik url(...) natürlich vorhanden sein muss:
background: #192F56 url(pics/verlauf_diagonal_400.jpg) repeat-y;
An der gestrichelten roten Linie endet die Hintergrundgrafik und geht in die Hintergrundfarbe über. Auf diese Art kann man Breiten flexibel gestalten.
Die Hintergrundfarbe 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).
Hintergrundbild rechts
Hier wird das Hintergrundbild rechts angeordnet (rote Linie):
background: #00265c url(pics/verlauf_weiss_grau_200.jpg) repeat-y right;
Durch Hintergrundbilder mit Farbverlauf können interessante Effekte entstehen, wie z.B. unten beim Übergang der Fusszeile in den Body.
Sollte gerade kein Grafikprogramm verfügbar sein, leistet der Onlinedienst dynamicdrive hierfür gute Dienste.
Zum Thema Hintergrundbild siehe auch meine Kurzeinführung mit Beispielen.
