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
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 4.2-4.3 | 12.2-12.5 |
Chrome-on-Android supports local, but the old Android browser does not.
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
You can modify manually on media queries in the css file
Careful this not work in mobile / tablet device -> chrome android
Thanks
https://tipscodeblog.wordpress.com/
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
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: https://bugzilla.mozilla.org/show_bug.cgi?id=1418923
… when you also applied a css filter to the element, that is.