Hintergrundbilder mit CSS

Eine interessante Variante der Bildmanipulation mit Hilfe von CSS sind Hintergrundbilder. Die alten HTML-Methoden hatten zahlreiche Nachteile, zum Beispiel das automatische horizontale und vertikale Vervielfältigen, wenn die Größe der Seite die des Bilds übersteigt. Mit folgender CSS-Konstruktion lässt sich dies vermeiden:

body {
background-image: url(back.jpg);
background-repeat: no-repeat; }

Es gibt noch einige andere Eigenschaften, mit denen Sie das Hintergrundbild steuern können. Mit background-attachment: scroll oder fixed legen Sie fest, ob das Bild mitscrollen oder fix an seiner Position stehen bleiben soll. Diese Optionen sind natürlich nicht an das body-Tag gebunden. Wollen Sie zum Beispiel nur eine Textpassage mit einem Hintergrundbild versehen, definieren Sie einfach eine neue Klasse nach folgendem Muster:

.hintergrundbild {
background-image: url(back.jpg);
background-repeat: no-repeat; }

Mit diesem Trick lassen sich zum Beispiel Textabschnitte mit einem Bild oder einem Farbverlauf hinterlegen. Auch Formulare, Tabellen und andere HTML-Konstrukte können Sie auf diese Weise mit Hintergrundbildern versehen.
Wollen Sie zum Beispiel eine Tabelle mit einem Farbverlauf hinterlegen, produzieren Sie zuerst mit einem Grafikprogramm einen ein paar Pixel hohen Streifen in der Breite der zu hinterlegenden Tabelle mit dem gewünschten Farbverlauf. Speichern Sie diese Grafik ab und definieren Sie für das table-Tag dann ein Format nach folgendem Muster:

table {
border: 1px solid darkblue;
background-image: url(verlauf.jpg);
background-repeat: repeat-y; }

Sie legen damit fest, dass für die Tabelle als Hintergrundbild die Datei verlauf.jpg genutzt werden soll. Da es sich dabei nur um einen schmalen Streifen handelt, soll der über die gesamte Höhe der Tabelle wiederholt werden. Das steuern Sie mit background-repeat und dem Wert repeat-y.