Mit CSS lassen sich Hintergrundbilder auf verschiedene Art und Weise einbinden.

Mit der Eigenschaft background-image lassen sich diversen Elementen Hintergrundbilder zuweisen.Hierzu verwendet man das Schlüsselwort url und gibt in Klammern danach den Pfad zur Datei an.

Wohlgemerkt den Pfad von der CSS-Datei aus gesehen zur Bilddatei. In diesem Fall liegt die CSS-Datei in dem Haupt-Verzeichnis über dem Verzeichnis images (darin befinden sich die Bilddateien), also muss der Pfad auf das Bildverzeichnis images verweisen.

#header { background-image: url (images/header.gif); }

Hier ein Beispiel für ein Hintergrundbild im Kopfbereich – einmal ausführlich – einmal in Kurzschreibweise mit weiteren Einstellmöglichenkeiten, die unten stehend erläutert werden:

 

 

Wiederholung des Hintergrundbildes

Mit background-repeat kann man die Art der Wiederholung der Anzeige des Hintergrundbildes bestimmen:

background-repeat: repeat-x; das Bild wird horizontal wiederholt
background-repeat: repeat-y; das Bild wird vertikal wiederholt
background-repeat: no-repeat;
das Bild wird nur einmalig angezeigt und nicht wiederholt

Standardmäßig, d.h. ohne Angabe eines Wertes von background-repeat wird das Bild gekachelt, also horizontal und vertikal wiederholt.

Position des Hintergrundbildes

Die Angabe, wo das Bild platziert sein soll bzw. an welcher Stelle mit der Wiederholung des Bildes angefangen werden soll, erfolgt über background-position.

Für die vertikale Positionierung verwendet man top, center oder bottom, für die horizontale Positionierung left, center, right. Statt der Bezeichnungenn kann man auch Prozentwerte einsetzen, so z.B. ergibt die 0% eine Positionierung oben oder auch links, mit 50 % 50% würde man ein Bild mittig platzieren.

Hintergrundbild als Wasserzeichen

Ein schicker Effekt stellt sich ein, wenn man ein Hintergrundbild fest platziert und sich die Inhalte im Vordergrund nach unten scrollen lassen.

Das wurde auf dieser Website auch so gemacht. Hier das Beispiel einmal ausführlich und einmal in Kurzschreibweise, die Erläuterungen dazu findet man weiter unten:

Diesen Effekt erreicht man mit der Eigenschaft background-attachment: fixed und der Angabe z.B. background-position: top left , mit der man angibt, an welcher Stelle es platziert werden soll.

Es gibt noch einige andere Varianten, die in einem nächsten Beitrag vorgestellt werden.