background-attachment

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The background-attachment property in CSS specifies how to move the background relative to the viewport.

There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds):

See the Pen Background attachment demo by Timothy Miller (@tjacobdesign) on CodePen.

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.

Related

More Resources

Browser Support

The fixed and 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.

Desktop

ChromeFirefoxIEEdgeSafari
4259125

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1231244.2-4.312.2-12.5

Chrome-on-Android supports local, but the old Android browser does not.