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

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard

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

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

Copy to clipboard
Copy to clipboard

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