The background-attachment property

The background-attachment property specifies how to scroll an element’s background image: together with a text, or the text will slide over the image.

Syntax

cssselector {
  background-attachment: fixed | scroll | local;
}

Values

Value	Description
`fixed`	A background image will be stationary, and a text will slide over it.
`scroll`	A background image will scroll along with a text.
`local`	A background is fixed based on the behavior of an element. If an element has scrolling, the background will scroll along with a content, but the background outside the element will remain in place.

Default value: scroll.

Example . The scroll value

Currently the background-attachment property is set to scroll. Scroll the element vertically - you will see the text scroll along with the background:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Example . The fixed value

And now the background-attachment property is set to fixed. Scroll the element vertically - you will see the text sliding over the background:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}