← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 10 of 21

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:

  1. The Default: scroll
  2. Pinning a Background with fixed
  3. The local Value
  4. Performance Considerations
  5. Combining Attachment with Size and Position
Syntax
css 
selector {
  background-attachment: scroll | fixed | local;
}

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.

Note:
  • Accepted values:
  • scroll — moves with the element, not the page scroll (default)
  • fixed — pinned to the viewport, stays put while the page scrolls
  • local — scrolls with the element's own content
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • fixed — pinned to the viewport
  • scroll — attached to the element itself (initial value)
  • local — moves with the element's scrolling content
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • scroll — fixed to the element, moves with the page (initial value)
  • fixed — fixed to the viewport, stays put while scrolling
  • local — scrolls with the element's own content
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • background-attachment: fixed — pin the image to the viewport
  • background-size: cover — scale to fill the box, may crop
  • background-position: center — keep the focal point centered
  • background-attachment: scroll | local — other attachment modes
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>
Live Example
Related Topics

CSS Background Repeat · CSS Background Shorthand · CSS Background Image · CSS Background Color

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using background-attachment: fixed on mobile browsers, where it is often ignored or behaves differently.
  2. Expecting fixed to fix the image inside the element, when it is fixed relative to the viewport.
  3. Expecting local to behave like scroll, when local scrolls with the element's content.
Browser Support

Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.

🔒

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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.