CSS background-attachment property

The background-attachment property specifies if a background image will move when the user scrolls the page or if it will stay in place.

This property is NOT inherited

Possible values

Value Description
fixed Background will stay in place
scroll Background will move with the page (default)

Example

div { background-image: url(/images/ob020.jpg); background-attachment: fixed; }

Output:

Try scrolling the container down, the background will stay in place
text
text
text
text
text
text
text
text
text
text
text

Javascript

You can access this property with Javascript:

element.style.backgroundAttachment = "fixed";
element.style.backgroundAttachment = "scroll";

Other background properties

background
background-color
background-image
background-position
background-repeat

CSS background examples

Setting a background color
Setting a background color for a table
Setting a background image for a page
Setting a background image for a table
Setting a background image that does not move
Setting a background image that repeats horizontally
Setting a background image that repeats vertically
Setting a background image that repeats for the whole page
Setting a background image that is center positioned
Setting a background image that is center positioned and does not move
Setting all the background properties with one declaration

More CSS examples

Web Reference
  1. CSS reference
  2. HTML reference
  3. RSS reference

© Copyright 2011-2012 Landofcode.com
Terms of use | Privacy policy | Copyright information | Make a donation