CSS background-attachment Property

Definition and Usage

The background-attachment property decides what a background-image is locked to when scrolling happens. The image can stick to the element (scroll), to the viewport (fixed), or to the element's own overflowing content (local).

The initial value is scroll. The property is not inherited. It applies to every element, including ::first-letter and ::first-line. With several images, list one keyword per layer, separated by commas. With fixed, background-origin is ignored.

CSS Syntax

For multiple images, write a comma list such as fixed, scroll. Each keyword matches one image in the same order.

Property Values

How to Use background-attachment

Add an image first, then choose what that image is locked to when something scrolls.

1. Set a background-image (a file or a gradient). Attachment has nothing to move without an image.
2. Give the element a size. For local or to compare scroll inside a box, also set overflow: auto and enough content to scroll.
3. Set background-attachment on that element. It is not inherited.
4. With several images, list one keyword per layer: fixed, scroll.

Live Preview

A short scrollable box with a striped image. Change background-attachment, then scroll inside the box.

CSS Examples

Each snippet adds only what background-attachment needs: an image, a box, and often overflow so you can scroll. Use Try It Yourself for a live editor.

<style>
  div {
    height: 140px;
    overflow: auto;
    padding: 16px;
    color: #fff;
    background-image: repeating-linear-gradient(
      135deg,
      #1d4ed8 0 16px,
      #2563eb 16px 32px,
      #38bdf8 32px 48px
    );
    background-attachment: scroll;
  }
</style>

<div>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>

<style>
  div {
    height: 140px;
    overflow: auto;
    padding: 16px;
    color: #fff;
    background-image: repeating-linear-gradient(
      135deg,
      #1d4ed8 0 16px,
      #2563eb 16px 32px,
      #38bdf8 32px 48px
    );
    background-attachment: local;
  }
</style>

<div>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>

<style>
  body {
    margin: 0;
  }
  .panel {
    min-height: 180px;
    padding: 16px;
    color: #fff;
    background-image: repeating-linear-gradient(
      135deg,
      #1d4ed8 0 16px,
      #2563eb 16px 32px,
      #38bdf8 32px 48px
    );
    background-attachment: fixed;
  }
  .spacer {
    height: 60vh;
    padding: 16px;
  }
</style>

<div class="panel">fixed — scroll the page</div>
<div class="spacer">Keep scrolling. The stripes stay locked to the window.</div>

Key Takeaways