W3docs
en
Log in

CSS background-attachment Property

The CSS background-attachment property sets whether a background image scrolls with the page, stays fixed, or scrolls with element content.

The background-attachment property defines whether a background image stays fixed in place or scrolls along with the rest of the page. It controls how the image behaves while the user scrolls — a small detail that is the key ingredient behind effects like fixed banners and CSS-only parallax.

This page explains every value, when to reach for each, and the one gotcha (mobile) that trips people up.

Values

background-attachment accepts five values:

  • scroll (default) — the background is fixed to the element, so it does not move while the element's own content scrolls, but it does move when the page scrolls. In practice it behaves as "scrolls with the page."
  • fixed — the background is fixed to the viewport. It stays put while everything else scrolls, so the content appears to slide over a stationary image. This is what creates the classic parallax / hero-banner look.
  • local — the background is fixed to the element's content. When you scroll inside a scrollable element (overflow: auto), the background scrolls together with that content.
  • initial — resets the property to its default value (scroll).
  • inherit — takes the value from the parent element.

The difference between scroll and local only shows up on an element that has its own scrollbar. On a normally-scrolling page they look the same.

In JavaScript the DOM property name is camelCase: element.style.backgroundAttachment.

Initial Valuescroll
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedNo.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.backgroundAttachment = "scroll";

Syntax

Syntax of CSS background-attachment Property

background-attachment: scroll | fixed | local | initial | inherit;

Example of the background-attachment property with the "scroll" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image scrolls with the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Try it Yourself »

In the following example the background-image is "fixed" and does not move with the page.

Example of the background-attachment property with the "fixed" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Try it Yourself »

Example of the background-attachment property with the "local" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .local-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: local;
        background-size: 400px 100px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="local-container">
      <p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Try it Yourself »

Example of the background-attachment property with a fixed background image and background-size: cover:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        min-height: 500px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <p>Scroll the page to see the effect.</p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>
Try it Yourself »

When to use each value

  • Reach for fixed when you want a hero image or full-page background that stays still as content scrolls over it — the cheapest way to get a parallax-style effect with no JavaScript.
  • Reach for local when a scrollable box (a chat panel, a code listing, a card with overflow: auto) should keep its background glued to the scrolling content rather than to the box itself.
  • Leave it at scroll for ordinary page backgrounds that should move naturally with the page.

Gotcha: fixed on mobile

background-attachment: fixed is poorly supported on mobile browsers — most notably iOS Safari, where it either renders the image stretched or disables the fixed behavior entirely for performance reasons. If you need a reliable parallax effect on mobile, use a separate fixed-position element instead of relying on this property. Always test fixed backgrounds on a real touch device.

Because the property can force the browser to repaint the background on every scroll frame, overusing fixed on large images can also hurt scroll performance.

background-attachment is usually set together with other background properties:

Practice

Practice
Which of the following are valid CSS background-attachment property values?
Which of the following are valid CSS background-attachment property values?
Was this page helpful?