background-attachment

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

ChromeOperaFirefoxIEEdgeSafari
410.5259125

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
1111No4.2-4.36156

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

Comments

  1. User Avatar
    Paolo
    Permalink to comment#

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

    i’m working on this site: http://nest.gov.ph/visitors 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
    Bernie
    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: http://www.quirksmode.org/blog/archives/2016/07/the_backgrounda.html

Submit 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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag