CSS Background Attachment

background-attachment decides whether a background image scrolls along with the page content or stays pinned in place as the user scrolls past it.

In this page:

The Default: scroll
Pinning a Background with fixed
The local Value
Performance Considerations
Combining Attachment with Size and Position

The Default: scroll

background-attachment: scroll is the default and means the background image moves together with the element's content as the page scrolls -- the image is effectively fixed relative to the element, not the viewport.

Example: The Default: scroll

css

<style>
.box {
  background-image: url('https://placehold.co/300x600');
  background-attachment: scroll;
  height: 150px;
  overflow: auto;
  color: white;
}
</style>
<div class="box">
  <p>Background moves together with the page</p>
  <p>Line 1 of filler content.</p>
  <p>Line 2 of filler content.</p>
  <p>Line 3 of filler content.</p>
  <p>Line 4 of filler content.</p>
  <p>Line 5 of filler content.</p>
  <p>Line 6 of filler content.</p>
  <p>Line 7 of filler content.</p>
</div>

Pinning a Background with fixed

background-attachment: fixed anchors the image to the browser viewport itself, so the image stays visually still while all page content scrolls over it -- this is the classic parallax effect used for full-width hero sections.

Example: Pinning a Background with fixed

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  height: 300px;
}
</style>
<div class="hero">Stays still while the page scrolls over it</div>

The local Value

background-attachment: local scrolls the background along with the element's own content if that element is independently scrollable (has overflow: auto/scroll with content taller than it), which scroll does not do -- scroll keeps the background fixed relative to the element even while its inner content scrolls.

Example: The local Value

css

<style>
.box {
  background-image: url('https://placehold.co/300x600');
  background-attachment: local;
  height: 150px;
  overflow: auto;
  color: white;
}
</style>
<div class="box">
  <p>Background scrolls together with this element's own inner content</p>
  <p>Line 1 of filler content.</p>
  <p>Line 2 of filler content.</p>
  <p>Line 3 of filler content.</p>
  <p>Line 4 of filler content.</p>
  <p>Line 5 of filler content.</p>
  <p>Line 6 of filler content.</p>
  <p>Line 7 of filler content.</p>
</div>

Performance Considerations

background-attachment: fixed can cause janky scrolling on some mobile browsers because the browser has to repaint the fixed background on every scroll frame; testing on real devices matters more for this property than most others.

Example: Performance Considerations

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  height: 200px;
}
</style>
<div class="hero">Test fixed backgrounds on real mobile devices</div>

Combining Attachment with Size and Position

A fixed background is almost always paired with background-size: cover so the pinned image fills the viewport width regardless of screen size, and often background-position: center to keep the most important part of the image visible.

Example: Combining Attachment with Size and Position

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 300px;
}
</style>
<div class="hero">Fixed background, scaled to cover, centered</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Repeat Next Lesson → CSS Background Shorthand