The background-attachment sets the background scroll behavior.
Possible values include fixed or scroll.
fixed background stays at a fixed position, relative to the viewport.scroll background scrolls with the page.
An element with background-attachment set to fixed.
The image stays in position when the page is scrolled.
<style>
.bg-fixed {
height: 240px;
padding: 30px;
background-image: url("/img/css/bg.jpg");
background-attachment: fixed;
}
</style>
<div class="bg-fixed">
</div>
background-attachment: scroll | fixed | local |
initial | inherit;
| Value | Description |
|---|---|
| scroll | Default. Scrolls background with the rest of the page. |
| fixed | Background image will be positioned fixed. |
| local | Background image will scroll with the element's content. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-attachment values.
<style>
.withbg-example {
height: 300px;
background-image: url("/img/css/bg.jpg");
background-attachment: scroll;
background-origin: content-box;
}
</style>
<div class="withbg-example">
</div>
This table shows when background-attachment support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
