Style backgroundAttachment Property
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.
See Also:
HTML Styles: The background Property
CSS Tutorial: CSS Backgrounds
CSS Reference: The CSS background-attachment Property
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 |
Browser Support
backgroundAttachment is a CSS1 (1996) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
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:
let 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:
let back = document.body.style.backgroundAttachment;
Try it Yourself »
