CSS background-attachment Property

Description

The background-attachment property determines whether the background image will scroll along with the contents of the element. The image can be fixed and remain motionless, or move together with the document. You can specify multiple values for a series of background images, listing the values separated by commas.

Initial value: scroll
Applies to: All elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.backgroundAttachment

Syntax

background-attachment: <attachment> [ , <attachment> ]*

Values

<attachment> = scroll | fixed | local

scrollBackground image scrolls with the object as the document is scrolled.
fixedBackground image will not scroll with its containing element, instead remaining stationary within the viewport.
localBackground image will not scroll with its containing element, but will scroll when the element's content scrolls: it is fixed regarding the element's content.
inherit

Example

HTML

<p>Example of the css background-attachment property.</p>

CSS

body { 
   background-image: url(images/diamond.png);
   background-attachment: fixed;
   height: 500px;
} 
p {
   padding: 10px;
   background: white;
   color: black;
}

Result