CSS Backgrounds Background Attachment
Example
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
body {
background-image: url('img.jpg');
background-attachment: fixed;
}
| 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. |
| inherit | Inherits this property from its parent element. |
Examples
background-attachment: scroll
The default behaviour, when the body is scrolled the background scrolls with it:
body {
background-image: url('image.jpg');
background-attachment: scroll;
}
background-attachment: fixed
The background image will be fixed and will not move when the body is scrolled:
body {
background-image: url('image.jpg');
background-attachment: fixed;
}
background-attachment: local
The background image of the div will scroll when the contents of the div is scrolled.
div {
background-image: url('image.jpg');
background-attachment: local;
}
