Frage stellen
Hintergrund
Sinnvoll sind CSS Angaben zum Hintergrund vor allem für Blockbildende Elemente wie etwa div und td. Werden diese Eigenschaften auf das body-Element angewendet, so gilt die Einstellung für den gesamten Bildschirmbereich. Es lassen sich aber durchaus in Spezialfällen auch Inline-Elemente mit einem eigenen Hintergrund versehen. Sehr schön kann man diese Angaben auch mit weiteren Angaben zum Innenabstand und Rahmen kombinieren (siehe dazu Teil VI des Kurses über das CSS-Boxenmodell).
Hintergrundfarbe
Mit der Angabe background-color kann eine Hintergrundfarbe definiert werden. Mögliche Werte dafür sind die in HTML üblichen Hexadezimalen Farbwerte. Ein Beispiel:
body { background-color:#99CC99; }
Beachten sie dabei bitte auch das Netscape 4 Hintergundfarben für einzelne Blockelemente wie etwa p oder div nur auf den unmittelbaren Hintergund des darin enthaltenen Textes anwendet, anstatt auf den ganzen Block. Um dies zu vermeiden, können sie zusätzlich noch einen unsichtbaren Rahmen um den Block definieren, wodurch Netscape 4 die Hintergrundfarbe plötzlich für den ganzen Block zeigt. Rahmen werden in Teil VI dieses Kurses behandelt.
Hintergrundbild
Mit der Eigenschaft background-image kann ein Hintergrundbild für eine Fläche bestimmt werden, welches sich tapetenartig wiederholt. Als Bild kann ein beliebiges .jpg, .gif oder .png Bild benutzt werden. Zum referenzieren des Bildes gelten die in HTML üblichen Angaben für relative und absolute Pfade. Ein Beispiel:
div.kasten { background-image:url(hintergrund.jpg); }
Wird die Eigenschaft background-image verwendet, kann zusätzlich auch die Eigenschaft background-repeat verwendet werden. Normalerweise werden Hintergrundgrafiken tapetenartig wiederholt. Mit background-repeat kann ein anderes Verhalten erzwungen werden. Möglich sind dabei folgende Angaben: repeat (wiederholen, also die Voreinstellung), repeat-x (nur waagrecht wiederholen), repeat-y (nur senkrecht wiederholen) und no-repeat (nur als Einzelbild anzeigen). Ein Beispiel:
div.kasten { background-image:url(hinten.png); background-repeat:repeat-x; }
Beachten Sie bitte, daß Netscape 4 diese Eigenschaft zwar interpretiert, aber massive Probleme bei der Darstellung hat.
Darüber hinaus gibt es noch die Eigenschaft background-attachment die zusammen mit background-image verwendet werden kann. Diese Eigenschaft erzeugt einen sogenannten Wasserzeicheneffekt. Das bedeutet, das das Hintergrundbild beim scrollen scheinbar auf seinem Fleck stehen bleibt. Mögliche Werte sind: scroll (scrollt mit, also die Voreinstellung) und fixed (bleibt stehen). Ein Beispiel:
body { background-image:url(hinten.png); background-attachment:fixed; }