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

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>

In this exapmle you should scroll the page to see how fixed background image disapears.

Example

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

Related Recourses

Background-color, background-image, background-repeat, background-position, background-origin, background-clip, background-size.




Related articles