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.


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.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox

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


  1. User Avatar
    Permalink to comment#

    Hi, i’m a big fan of your site and tutorials!

    i’m working on this site: and i have some fixed background on the bottom section and also in the about page somewhat like a parallax effect but not totally. My problem is it’s working on desktop but on tablet and mobile the background just scroll with the content. How can i make it work on those devices? do you have a tutorial for this? Thanks

  2. User Avatar
    Permalink to comment#

    There’s a bug in Chrome 53 on Mac that causes background-attachment: local not to work unless you set border-radius for that element too. And the value for border-radius must be greater than 0.

    Chrome 51 on Windows 10 has the same bug.

    More here:

  3. User Avatar
    Permalink to comment#

    There is a bug in Firefox 59 that makes the page jittery when scrolling over an element with background-attachment: fixed.

    Bug status report here:

    • User Avatar
      Permalink to comment#

      … when you also applied a css filter to the element, that is.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.