CSS background-attachment: Fixed and Scrolling

background-attachment decides what the background does when the page scrolls.

Value	Behaviour
`scroll`	The background stays in place on the element and scrolls with the page (the default)
`fixed`	The background is tied to the browser window and the content scrolls over it
`local`	The background scrolls with the element’s own content

A fixed background

style.css

CSS

.banner {
  background-image: url("images/mountains.jpg");
  background-attachment: fixed;
  background-size: cover;
  min-height: 60vh;
}

As you scroll, the picture seems to stay still while the banner moves over it. This is the simple parallax effect.

Try the “local” difference

index.html

HTML

<style>
  .box {
    height: 90px; overflow: auto; width: 45%; display: inline-block; vertical-align: top;
    background-image: linear-gradient(#d94a00, #1a5276);
    color: white; margin-right: 8px;
  }
  .l { background-attachment: local; }
</style>
<div class="box">scroll (default): the gradient stays put.<br><br><br><br><br><br>More text.</div>
<div class="box l">local: the gradient scrolls with the text.<br><br><br><br><br><br>More text.</div>

Scroll inside each box to see the difference.

dangerous

Fixed backgrounds and phones

Many mobile browsers ignore fixed or handle it poorly, and it can make scrolling jerky. Treat it as an extra, not something the design depends on.