CSS background-attachment Property

CSS background-attachment property is specified whether the background image position is fixed within the viewport, or scrolls with the document.

Usages

The following table outline the usages and version history of this property.

Default value: scroll
Applies to: all elements
Inherited: no
Version: CSS1
JavaScript Syntax: object.style.backgroundAttachment = "fixed"

Syntax

Here is a syntax for the CSS background-attachment property

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

Property Values

The following table describes the values of this property.

Value Description
scroll Default. The background image is fixed relative to the element and scroll with its contents
fixed The background image is fixed relative to the viewport and does not move with the element
local The background image is fixed relative to the element's contents. But if the element has a scrolling mechanism then the background image scrolls with the element's contents
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows the scroll, fixed, local position.

.scroll { 
  height: 200px;
  width: 300px;
  background-image: url("../../images/article.jpg");
  background-attachment: scroll;
  background-repeat: no-repeat;
  overflow-y: scroll;
}
.fixed { 
  height: 200px;
  width: 300px;
  background-image: url("../../images/article.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-y: scroll;
}
.local { 
  height: 200px;
  width: 300px;
  background-image: url("../../images/article.jpg");
  background-attachment: local;
  background-repeat: no-repeat;
  overflow-y: scroll;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.