CSS Backgrounds Background Attachment


Example

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}
ValueDescription
scrollThe background scrolls along with the element. This is default.
fixedThe background is fixed with regard to the viewport.
localThe background scrolls along with the element's contents.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Examples

background-attachment: scroll

The default behaviour, when the body is scrolled the background scrolls with it:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

background-attachment: fixed

The background image will be fixed and will not move when the body is scrolled:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

background-attachment: local

The background image of the div will scroll when the contents of the div is scrolled.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}