background-attachment

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;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy