Hintergrundfarbe und Hintergrundbild
Hintergrundfarbe
Mit Cascading Style Sheets kann eine Seite oder beliebige Abschnitte mit einer Hintergrundfarbe beziehungsweise einem Hintergrundbild versehen werden. Erfolgen keine Angaben, greift die HTML-Standardeinstellung, bei der der Seitenhintergrund weiß gehalten ist und die Schrift schwarz. Der CSS-Befehl für die Hintergrundfarbe lautet „background-color“ und für die Farbgebung gelten dieselben Bestimmungen wie für die Schriftfarbe. Sowohl bei der Hintergrundfarbe als auch bei Verwendung eines Hintergrundbildes sollte man auf einen ausreichenden Kontrast achten, da sonst das Lesen sehr schnell zur Qual wird.
Netscape
Zu beachten ist, dass der Netscape Browser die Hintergrundfarbe direkt nach dem jeweils letzten Buchstabe einer Zeile abschneidet, so dass kein einheitlicher Farbblock entsteht. Will man dies verhindern, muss man zunächst einen Rahmen in derselben Farbe wie die Hintergrundfarbe um das Element legen.
Hintergrundbild
Für ein Hintergrundbild steht der CSS-Befehl „background-image“ zur Verfügung. Danach folgt in Klammern der Pfad des Bildes entweder absolut oder relativ zur aktuellen Datei beziehungsweise der ausgelagerten CSS-Datei. Bei einem Hintergrundbild wird ein einzelnes Bild so lange horizontal und vertikal wiederholt beziehungsweise gekachelt, bis die vordefinierte Blockgröße oder die ganze Seite gefüllt ist. An den Rändern wird das Hintergrundbild abgeschnitten.
Bildwiederholung
Über die Anweisung „background-repeat“ hat man mit CSS die Kontrolle ob und wie ein Hintergrundbild wiederholt wird. Mit „background-repeat:no-repeat“ wird das Hintergrundbild nur einmal angezeigt. „background-repeat:repeat-x“ bewirkt eine einzeilige Wiederholung, während mit „background-repeat:repeat-y“ das Bild über eine Spalte, also einmal vertikal, wiederholt wird.
Positionierung des Hintergrundbildes
Mit „background-position“ kann man einen Hintergrund auch beliebig positionieren. Dazu benötigt man immer zwei Werte, die die Position des Bildes von der linken, oberen Ecke angeben.
Statt absoluter Angaben in Pixel oder Zentimetern können auch folgende relative Angaben verwendet beziehungsweise mit absoluten Positionierungen kombiniert werden:
left:horizontal, linksbündig
center: horizontal zentriert
right: horizontal, rechtsbündig
top: vertikal, obenbündig
middle: vertikal, mittig
bottom: vertikal, untenbündig
Wasserzeichen-Effekt
Ein Hintergrundbild kann mit der CSS-Anweisung „background-attachment:fixed“ auch wie ein Wasserzeichen auf der Seite fixiert werden, so dass es beim Scrollen stehenbleibt, während sich der Vordergrund darüber hinweg bewegt.
| IE | Opera | Netscape | Firefox | ||||||
| 5 | 5.5 | 6 | 6 | 7 | 8 | 6 | 7+ | 0.8+ | |
| background | x | x | x | x | x | x | x | x | x |