CSS background-attachment
The background-attachment property controls whether a background image scrolls with the page or stays fixed relative to the viewport.
Syntax
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;Values
scroll: the background moves with the element as the page scrolls.fixed: the background stays fixed relative to the viewport.local: the background scrolls with the element's own contents.
Example
.hero {
min-height: 20rem;
background-image: url("mountains.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}This can create a simple parallax-style effect. Use it carefully on mobile devices, where fixed backgrounds may behave differently depending on the browser.
Common mistake
background-attachment only matters when there is a background image or gradient large enough for scrolling behavior to be visible.