CSS background-attachment: Mitscrollen oder fixieren?

Mar 2026

Ohne weitere Angaben im CSS scrollen Hintergrundbilder mit dem Inhalt, wenn der Benutzer die Seite scrollt. background-attachment regelt, ob das Hintergrundbild beim Scollen mitscrollt oder auf den Viewport fixiert wird oder mit dem Inhalt des Elements scrollt.

fixed – im Browserfenster fixiert

background-attachment: fixed fixiert das Hintergrundbild an einer festen Position im Browserfenster und erweckt beim Scrollen den Anschein, die folgenden Inhalte würden über das Hintergrundbild geschoben. background: fixed ist die Basis für den Parallax-Effekt.

elem { background: url(flowers.png); }

Ändern background-attachment: scroll (default) background-attachment: fixed

Umschalten und ein Stück scrollen, um den Unterschied zu sehen.

scroll (Voreinstellung): lässt das Hintergrundbild zusammen mit Text und Bildern scrollen.
fixed: hält das Hintergrundbild fest.

background-attachment: fixed ist mit einem hohen Aufwand für das Rendern und das Scrollen verbunden und die mobilen Browser sparen Energie an allen Ecken und Katen. Darum ist background: fixed auf vielen mobilen Geräten deaktiviert oder verhält sich nicht wie vorgesehen.

Besonders iOS (Safari auf dem iPad, iPhone) ist ausgesprochen sparsam beim Scrollen und setzt Javascript während des Scrollens aus.

Und mehr Klagen über background: fixed auf dem iPad: Mit background-size: cover wird das Hintergrundbild in Mobile Safari und Mobile Chrome zwar angezeigt, aber nur ein Bildauschnitt ist sichtbar und wirkt, als wäre er stark gezoomt. Daran hat sich auch in der aktuellen Version 17.2.1 (19617.1.17.11.12) nichts geändert.

Unter Android mit Chrome wirkt background-attachment: fixed, nicht mit dem Samsung-Browser.

.fixed {
	background-image: url(rhein.jpg);
	background-position: bottom center; 
	background-repeat: no-repeat; 
	background-size:cover; 
	background-attachment:fixed;
}

Wenn das Bild »zu kurz« ist

Das Bild im Absatz zuvor ist nahezu quadratisch. Wenn die Seite gescrollt wird, wird der Streifen oben und unten weiß – das Bild ist »zuende«. Das Problem ist typisch für background-attachment: fixed. Das Setup (quadratisches Bild und nur ein schmaler sichtbarer Streifen) verstärken es noch.

Die beste Lösung ist natürlich die Wahl eines größeren Bildes: Das Bild muss deutlich höher sein als der Viewport. Die Faustregel lautet: mindestens 2 bis 3 mal Viewport-Höhe.

background-attachment: local – Hintergrund scrollt mit

Die Werte scroll und fixed gehen zurück auf CSS 2.1. scroll ist die Voreinstellung, bei der die Position des Hintergrunds relativ zum Element bleibt, für das es definiert ist. background-attachment: fixed ist relativ zum Viewport (aka Browserfenster), so dass der Hintergrund beim Scrollen fest steht. Wenn aber nur ein Teil der Seite scrollbar ist – z.B. ein Block mit overflow: scroll – scrollte der Hintergrund nicht mit, wenn der Block selber gescrollt wurde.

Mit background-attachment: local richtet sich der Hintergrund am Block aus:

background-attachment: scoll: Beim Scrollen der Seite scrollt der Hintergrund des Blocks mit, beim Scrollen des Overlays im Block bleibt der Hintergrund fest.
background-attachment: local: Beim Scrollen der Seite scrollt der Hintergrund des Blocks mit, beim Scrollen des Overlays im Block scrollt der Hintergrund mit.

Halvah sugar plum jelly gingerbread candy biscuit jelly-o cupcake macaroon. Tootsie roll jelly chocolate pie tiramisu. Pie marshmallow bonbon. Gummies tiramisu cake. Cake cake biscuit dessert sweet toffee jelly chocolate cake. Pie carrot cake toffee. Pie sugar plum cookie gummies jelly beans halvah lollipop. Sugar plum brownie tiramisu.

background-attachment: scroll background-attachment: local

Der Wechsel von scroll zu local zeigt, dass sich das Bezugssystem ändert – die Position des Hintergrundbilds richtet sich bei local am Block aus.