CSS Background Attachment

CSS Background Attachment: The background-attachment property is used to specify that the background picture is fixed or scroll with the rest of the page in the browser window.

CSS background-attachment

The background-attachment property specifies whether the background picture should scroll or be fixed (won’t scroll with the rest of the page):

Example
Specify that the background image should be fixed:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Example
Specify that the background image should scroll with the rest of the page:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.