background-attachment

Controls whether a background image stays fixed in place or scrolls along with the content. 'fixed' is often used to create a simple parallax-like effect where the page content slides over a static image.

Quick example

.parallax-section {
  background-image: url('stars.jpg');
  /* Image stays put while the user scrolls */
  background-attachment: fixed;
  background-size: cover;
}

Quick facts

Initial value
scroll
Inherited
No
Applies to
all elements
Animation type
discrete

background-attachment Browser Support

Limited availability96% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

1+
25+
15.4+
12+
ESC