CSS Background Attachment

CSS Background Attachment

The CSS background-attachment property controls whether a background image scrolls with an element, scrolls with its content, or remains fixed relative to the viewport.

The property accepts three main values: scroll, fixed, and local. The difference becomes most noticeable when the page or an element containing overflowing content is scrolled.

scroll

The initial value of background-attachment is scroll. The background is attached to the element itself and moves when the page containing the element is scrolled.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-attachment: scroll;
}

Despite its name, scroll does not mean that the background moves with the contents of an element's own scrolling area. If the element itself has overflowing content that can be scrolled, the background remains attached to the element rather than moving with that content.

fixed

The fixed value fixes the background relative to the viewport instead of attaching it to the element as the page scrolls.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-attachment: fixed;
}

As the page scrolls, the element moves across the fixed background. Only the portion of the background painted within the element is visible.

This behavior can create a stationary-background effect while page content moves over it.

local

The local value attaches the background to the element's scrolling contents.

.box {
  overflow: auto;
  background-image: url("images/landscape-1200x800.jpg");
  background-attachment: local;
}

When the content inside the element is scrolled, the background moves with that content. This distinguishes local from scroll, where the background remains attached to the element itself while its internal content scrolls.

Comparing background-attachment Values

The three values determine what the background is attached to while scrolling occurs.

The distinction between scroll and local matters primarily when an element has its own scrollable content.

Fixed Backgrounds and Sizing

Background attachment can be combined with properties such as background-position, background-size, and background-repeat.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

With a fixed background, the background positioning area is based on the viewport. This means sizing and positioning can behave differently from a background attached normally to an element.

Background Attachment on Mobile Devices

Fixed backgrounds should be tested carefully on phones and tablets. Mobile browsers can handle background-attachment: fixed differently because of scrolling behavior, dynamic viewport sizes, and browser interface controls.

When a fixed background is primarily decorative, a normal scrolling background can be used when consistent behavior across devices is more important than the fixed effect.

Background Attachment Example

The editor contains three scrollable boxes using the same landscape background. Each box uses a different background-attachment value so you can compare their behavior.

.scroll {
  background-attachment: scroll;
}
.fixed {
  background-attachment: fixed;
}
.local {
  background-attachment: local;
}

Scroll the content inside each box. The difference between scroll and local is especially important: the scroll background stays attached to its box, while the local background moves with the box's scrolling content. You can also scroll the editor page to observe the fixed background.