Lock background image in CSS

Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.

Value	Description	Example
Background-attachment: scroll	The image scrolls with the page - unlocked	Show example
Background-attachment: fixed	The image is locked	Show example

For example, the code below will fix the background image.

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }