background-attachment

background-attachment selects the reference to which a background is attached. Scroll attaches to the element’s box, local to its scrolling content, and fixed to the viewport where supported.

Scroll the content inside each region

The first background stays attached to its box while the paragraphs scroll. The second background moves with the content. The striped right gutter remains visible so you can compare the motion.

<div
  class="sample box"
  tabindex="0"
  role="region"
  aria-label="Scroll attachment"
>
  <p>Read the source.</p>
  <p>Change one value.</p>
  <p>Compare motion.</p>
  <p>Try another width.</p>
  <p>Keep text readable.</p>
</div>
<div
  class="sample local"
  tabindex="0"
  role="region"
  aria-label="Local attachment"
>
  <p>Read the source.</p>
  <p>Change one value.</p>
  <p>Compare motion.</p>
  <p>Try another width.</p>
  <p>Keep text readable.</p>
</div>

.sample {
  height: 130px;
  overflow: auto;
  margin-block: 0.75rem;
  background-image: repeating-linear-gradient(
    #bfdbfe 0 16px,
    #eff6ff 16px 32px
  );
  padding-right: 3rem;
}
.box {
  background-attachment: scroll;
}
.local {
  background-attachment: local;
}
p {
  padding: 0.5rem;
  margin: 0;
  background: white;
}

Inspect fixed attachment in this document’s viewport

Check the option, then scroll inside the preview document. Fixed references that iframe’s viewport, not the surrounding website. Uncheck it to compare box attachment. This is a behavior test rather than a recommended parallax effect.

<input id="fixed" type="checkbox" /><label for="fixed"
  >Use fixed attachment</label
>
<div class="banner" aria-hidden="true"></div>
<p>Scroll this document to compare the background reference.</p>

body {
  min-height: 850px;
}
.banner {
  height: 180px;
  margin-top: 2rem;
  background-image: repeating-linear-gradient(
    45deg,
    #bfdbfe 0 20px,
    #eff6ff 20px 40px
  );
  background-attachment: scroll;
}
#fixed:checked ~ .banner {
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) {
  #fixed:checked ~ .banner {
    background-attachment: scroll;
  }
}

Values and defaults

The initial value is scroll and the property is not inherited. Scroll moves with the element during page scrolling but not with its own scrollable content. Local uses the element’s scrollable content area. Fixed uses the viewport, changing the positioning area and the meaning of background-size percentages.

Separate image layers can use separate comma-separated attachment values. Mobile implementations have restrictions for fixed attachment; check the actual device rather than relying on desktop support or a blanket “fully supported” claim.

Motion and readability

Independently moving backgrounds can be distracting and costly to paint. Prefer a stable background unless the effect serves a clear purpose, respect motion preferences, and measure actual scrolling. Ensure text contrast remains sufficient as the background changes position.

Learn overflow, background-origin, and reduced motion.

Sources and browser support

MDN: background-attachment describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.