background-attachment

Chris Coyier on

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.

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):

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.

More Resources

Browser Support

The fixed and scroll values are supported everywhere, although fixed can behave strangely on mobile. local has this browser support:

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