Back to the index.
This page tests background-attachment. How is the background image attached to its element? Does it scroll with the element, the document, or not at all?
The background image scrolls with the document. And no, the name of this value has never made any sense, but it seems we’re stuck with it.
Scrollable
Background is fixed relative to the entire window. The element merely serves as a viewport through which you look at the background image.
In order to see the fixed background in action, scroll the main window slowly.
Scrollable
The background scrolls with the element.
Does not work in Chromia/Android
Does not work on Chromia on Android. HOWEVER, this one does. The bug is that the element also needs a border-radius with an actual value; 0 is not enough. Below is a test with border-radius: 1px.
Works in Chromia/Android
Turns out that there’s a local difference on iOS if you have -webkit-overflow-scrolling: touch enabled: Safari doesn’t scroll the background image.
background-attachment: local with -webkit-overflow-scrolling: touch