CSS background-attachment: scroll, fixed, local

background attachment – Hintergrundbild scrollen Zeigt einen Navigator hinter Wasserwellen

Ohne weitere Angaben scrollen Hintergrundbilder mit dem Inhalt, wenn der Benutzer die Seite scrollt. background-attachment: fixed setzt das Hintergrundbild relativ zum Viewport des Browsers und fixiert es beim Scrollen an Ort und Stelle.

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
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 Hintergrund in Mobile Safari und Mobile Chrome zwar angezeigt, aber nur ein Bildauschnitt ist sichtbar und wirkt, als wäre er stark gezoomt.

.fixed { 
    height: 220px; 
    background-image: url(fromtop.jpg);
    background-position: bottom center;
    background-attachment: scroll;
}
@media (min-width: 1025px) {
    .fixed { 
        background-repeat: no-repeat;
        background-size:contain;
        background-attachment:fixed;
    }
}

background-attachment: local

Die Werte scroll und fixed geht 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.

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