Example
Set a background-image to be fixed (will not scroll):
document.body.style.backgroundAttachment = "fixed";Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The backgroundAttachment property sets or returns whether a background image should scroll with the content, or be fixed.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| backgroundAttachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntax
Return the backgroundAttachment property:
object.style.backgroundAttachment
Set the backgroundAttachment property:
object.style.backgroundAttachment="scroll|fixed|local|initial|inherit"
Property Values
| Value | Description |
|---|---|
| scroll | The background scrolls along with the element. This is default |
| fixed | The background is fixed with regard to the viewport |
| local | The background scrolls along with the element's contents |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | scroll |
|---|---|
| Return Value: | A String, representing how the background image is attached to the object within the document |
| CSS Version | CSS1 |
More Examples
Example
Choose between scroll and local on a DIV element:
document.getElementById("myDIV").style.backgroundAttachment = "local";
Try it Yourself »
Example
Toggle between scroll and fixed:
var x = document.body.style.backgroundAttachment;
document.body.style.backgroundAttachment=(x=="scroll")? "fixed":"scroll";
Try it Yourself »
Example
Return the value of the background-attachment property:
alert(document.body.style.backgroundAttachment);
Try it Yourself »
Related Pages
CSS tutorial: CSS Background
CSS reference: background-attachment property
HTML DOM reference: background property
< Style Object