CSS background-attachment fixed, scroll, local

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;
}

background-attachment: local

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. Lollipop cheesecake pie croissant. Ice cream sugar plum cake dessert. Cake donut tootsie roll muffin chocolate bar chocolate cake bonbon dragée lollipop. Liquorice tiramisu caramels oat cake jelly beans cotton candy cookie cake sugar plum.

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.