background-attachment

christian.dinh2481 total contributions
Published Jun 30, 2021Updated Sep 3, 2021
Contribute to Docs
Determines if the background image is fixed in relationship to the viewport or whether it will scroll along with the rest of the page.
Syntax
background-attachment: <value>;
Where <value>
can be the following: scroll
| fixed
| local
| initial
| inherit
scroll
is the default value. The background image will scroll with the page.fixed
will cause the background image to stay in the same position on the page.local
will result in the background image scrolling within the elements contents.
Example 1
Set background image to be fixed to the viewport:
body {height: 1200px;background-image: url('fish.png');background-repeat: no-repeat;background-size: 400px 100px;background-attachment: fixed;}
Example 2
Set background to scroll with the page:
body {height: 1200px;background-image: url('fish.png');background-repeat: no-repeat;background-size: 400px 100px;background-attachment: scroll;}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.