background-attachment

Summary

Defines if a background image scrolls with the content or stays fixed.

Overview table

Initial value: scroll
Applies to: All elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: scroll
Percentages: n/a

Syntax

background-attachment: fixed
background-attachment: local
background-attachment: scroll

Values

scroll: Default. Background image scrolls with the object as the document is scrolled.
fixed: Background image stays fixed within the viewport and does not move when the element or the page is scrolled.
local: Background image stays fixed with regard to the element’s contents and scrolls as the element is scrolled.

Examples

The following examples use the background-attachment attribute and the background-attachment property to set the background to "fixed", so that the background does not scroll with the text.

This example uses an inline style sheet to set the background to fixed.

<style >
    body { background-attachment:fixed }
</style>
</head>
<body background="some.jpg">

View live example

This example uses scripting to set the page background to fixed.

document.body.backgroundAttachment = 'fixed';

Notes

Remarks

This property can be set with the other background properties by using the background composite property.

With CSS3 Backgrounds, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Related specifications

CSS 2.1: W3C Recommendation
CSS Backgrounds and Borders Module Level 3: W3C Candidate Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]