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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.