Kleiner Grafik-Kurs I.: Hintergrundbild positionieren

Selbstverständlich ist es auch möglich, ein Hintergrundbild an einer bestimmten Stelle zu positionieren. Im nachfolgenden Beispiel zeigen wir Ihnen auf, wie eine Grafik in der Mitte des Browserfensters, also horizontal und vertikal zentriert, dargestellt werden kann. Dazu fügen Sie den unten aufgeführten Code in die extern ausgelagerte CSS-Datei ein:

body
{
background-image: url('verzeichnis/hintergrundgrafik.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed
}

Im Code sind nur noch das Verzeichnis sowie der Dateiname der Hintergrundgrafik anzupassen!

Weshalb wurde im Code zusätzlich noch die Anweisung "background-attachment: fixed" hinterlegt?

Diese Anweisung bewirkt eigentlich, dass eine Hintergrundgrafik beim Scrollen nicht mitläuft. Sie sollte allerdings bei einer zentrierten Darstellung eines Hintergrundbildes im Browserfenster zusätzlich noch definiert werden. Wenn "fixed" nicht hinterlegt wurde, so stellen die meisten Browser wie z. B. Opera und Mozilla Firefox die Grafik nur horizontal, aber nicht vertikal zentriert im Fenster dar (Ausnahme: der IE = Internet Explorer). Da aber niemand im Voraus wissen kann, mit welchem Browser Ihre Seite aufgerufen wird, wäre es doch sicher sinnvoller, eine korrekte Darstellung bzw. Zentrierung der Hintergrundgrafik in allen Browsern zu erwirken. Abhilfe schafft hier nur die Anweisung "background-attachment: fixed"!

Beispiel mit fixed (alle Browser zeigen die Hintergrundgrafik in der Fenstermitte an)
Beispiel ohne fixed (nur der IE zeigt die Hintergrundgrafik in der Fenstermitte an)

Wenn eine Hintergrundgrafik mitgescrollt werden soll, dann wäre die Anweisung dafür "background-attachment: scroll". Im Prinzip ist diese Angabe aber überflüssig, da alle Browser Hintergrundgrafiken standardgemäß mitscrollen lassen, sofern der CSS-Datei keine weiteren Anweisungen zur Hintergrundgrafik vorliegen!

Diverse Formen im Gif-Format

Um die Grafiken herunterzuladen, fahren Sie mit der Maus über das gewünschte Bild und wählen mit der rechten Maustaste im Kontextmenü den Befehl "Bild speichern unter ..."!

zurück | weiter