DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
background-attachment property in CSS specifies how to move the background relative to the viewport.
There are three values:
local. The best way to explain this is via demo (try scrolling the individual backgrounds):
There are two different views to think about when talking about
background-attachment: the main view (browser window), and the local view (you can see this in the demo above).
scroll is the default value. It scrolls with the main view, but stays fixed inside the local view.
fixed stays fixed no matter what. It’s kind of like a physical window: moving around the window changes your perspective, but it doesn’t change where things are outside of the window.
local was invented because the default
scroll value acts like a fixed background. It scrolls both with the main view and the local view. There are some pretty cool things you can do with it.
scroll values are supported everywhere, although
fixed can behave strangely on mobile.
local has this browser support:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
|Android Chrome||Android Firefox||Android||iOS Safari|
local, but the old Android browser does not.