CSS background-attachment property

The background-attachment sets the background scroll behavior.

Possible values include fixed or scroll.

  • A fixed background stays at a fixed position, relative to the viewport.
  • A scroll background scrolls with the page.

Example

#

An element with background-attachment set to fixed.
The image stays in position when the page is scrolled.

<style>
  .bg-fixed {
    height: 240px;
    padding: 30px;
    background-image: url("/img/css/bg.jpg");
    background-attachment: fixed;
  }
</style>

<div class="bg-fixed">
</div>

Syntax

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

Values

#

Value Description
scroll Default. Scrolls background with the rest of the page.
fixed Background image will be positioned fixed.
local Background image will scroll with the element's content.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-attachment values.

<style>
  .withbg-example {
    height: 300px;
    background-image: url("/img/css/bg.jpg");
    background-attachment: scroll;
    background-origin: content-box;
  }
</style>

<div class="withbg-example">

</div>

Browser support

This table shows when background-attachment support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides