CSS Property: background-attachment
Specifies if a background is fixed to the viewport or if it scrolls along with the contents of its containing box.
As an example, a background image applied to a long page will typically scroll with the rest of the page. If a fixed background-attachment
is applied, however, the image will stay in the same position as the user scrolls the page up and down.
Possible Values
Value | Description | Example |
---|---|---|
scroll | The background is attached to the element box. It will scroll with the element box (and will therefore usually scroll with the page). Default behavior. | |
fixed | The background is attached to the viewport. It will remain stationary as the page is scrolled. | |
local | The background is attached to the box contents. It will scroll with the contents (which will equate to scroll unless the box has its own scrolling mechanism, via overflow , for example). | |
[value], [value] | For multiple backgrounds. Values separated by commas correspond to multiple images separated by commas with background-image . | scroll, fixed |
inherit |
Example
body { background-attachment: fixed; }
/* The background will remain stationary when the page's contents are scrolled through. */