background-attachment

The background-attachment property in CSS specifies how to move the background relative to the viewport.

.bg-fixed {
  background-attachment: fixed;
}

There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds):

Syntax

background-attachment = <attachment>#

<attachment> = scroll | fixed | local

• Initial: scroll
• Applies to: all elements
• Inherited: no
• Percentages: n/a
• Computed value: a list of the specified keywords
• Canonical order: per grammar
• Animation type: discrete

Values

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* multiple values */
background-attachment: scroll, fixed;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;

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: The default value. The background image scrolls with the main view, but stays fixed inside the local view.
• fixed: The background image 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: This value 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.

Using multiple values

If you’re using multiple background images, you can assign a different background-attachment value to each one. Each value corresponds to the background image in the same position.

.element {
  background-image: url(stars.svg), url(pattern.png);
  background-attachment: local, scroll;
}

In this example, the first background (stars.svg) scrolls along with the element’s contents (local), while the second background (pattern.png) stays fixed to the element while its contents scroll (scroll). The difference only becomes visible if the element is a scroll container and overflows. Otherwise, local behaves the same as scroll.

Browser Support

The background-attachment property is defined in the CSS Backgrounds Module Level 4 specification and is widely available across modern browsers. However, there is one notable exception.

Unfortunately, Safari on iOS doesn’t support the fixed value. The background scrolls with the page instead of staying fixed to the viewport. This has been the case for years and it seems to be an intentional limitation in WebKit.

A common workaround is to replace the background image with a fixed-position element (or pseudo-element) behind your content.

.hero {
  position: relative;
}

.hero::before {
  content: " ";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: url("hero.jpg") center / cover no-repeat;
}

Related properties