CSS background-attachment Property

The background-attachment property defines whether the background-image is fixed or will scroll along with the rest of the page.

background-attachment supports five values: scroll, fixed, local, initial, and inherit. When scroll is set, the background-image scrolls with the page. This is the default value. When fixed is applied, the background-image remains fixed to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the page. When local is set, the background-image scrolls with the element's contents. initial sets the property to its default value, and inherit inherits it from the parent element. Note: In JavaScript, the DOM property name is camelCase: backgroundAttachment.

Initial Value	scroll
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.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("/build/images/w3docs-logo-black.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("/build/images/w3docs-logo-black.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("/build/images/w3docs-logo-black.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 »