background-attachment

krushnarout's avatar
krushnarout's avatar
krushnarout
Published Jun 30, 2021Updated Oct 23, 2023
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;
}

The following gif runs as a loop to demonstrate the code block above:

CSS Background Attachment Example 1

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

The following gif runs as a loop to demonstrate the code block above:

CSS Background Attachment Example 2

All contributors

Contribute to Docs

Learn CSS on Codecademy