The CSS background properties handle the display of background effects on HTML elements.


The background-attachment CSS property defines how the background of an element scrolls relative to its containing parent, and it looks like this:

background-attachment: fixed;


There are three values: scroll, fixed, and local.

  • scroll: The background does not move within its container
  • fixed: The background stays fixed to the viewport, no matter what
  • local: The background scrolls within its container and the viewport


.scroll {
  background-attachment: scroll;
.fixed {
  background-attachment: fixed;
.local {
  background-attachment: local;

Here is a demo in CodePen:

background-blend-mode ...

Get Web Developer's Reference Guide now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.