CSS Kochbuch

3.8 Das Hintergrundbild verankern

Problem

Das Hintergrundbild soll sichtbar bleiben, auch wenn der Seiteninhalt gescrollt wird.

Lösung

Verwenden Sie die Eigenschaft background-attachment mit dem Wert fixed wie hier gezeigt:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
}

Diskussion

Mit Hilfe dieser Technik können Sie das Hintergrundbild an einer bestimmten Position fest verankern. Selbst wenn der Besucher die Seite scrollt, bleibt das Bild im Browserfenster sichtbar, wo Sie es positioniert haben. Ein weiterer möglicher Wert für background-attachment ist der Standardwert scroll. Selbst wenn Sie diesen Wert nicht ausdrücklich festlegen, wird das Bild mit dem übrigen Inhalt bewegt.

Vielleicht wollen ...