w3docs logo

CSS background-attachment Property

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

Background-attachment has three values: fixed, scroll and local. When the "scroll" value is set, the background-image will scroll with the page. This is the default value.

When the "fixed" value is applied, the background-image will remain fixed to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the page.

When the local value is set, the background-image will scroll with the element's contents.

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

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

Example of the background-attachment property:

<!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;
      }
    </style>
  </head>
  <body>
    <h2>Background-attachment example</h2>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>The background-image scrolls with the page. Try to scroll down.</p>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>

In the following example the background-image is "fixed" and do 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;
      }
    </style>
  </head>
  <body>
    <h2>Background-attachment example</h2>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>The background-image is fixed. Try to scroll down the page.</p>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>

Example of the background-attachment property with a disappearing fixed background image:

<!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>

Values

Value Description
scroll Makes the background image scroll along with the element. This is the default value
fixed Makes background fixed with regard to the viewport.
local Makes background scroll along with the element's contents.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
4.0+ 25.0+ 5.0+ 11.5+

Practice Your Knowledge

Which of the following are valid CSS background-attachment property values?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?