Fixed background parallax

<div class="text"><p>Scroll: the picture stays still,<br>the sections slide over it.</p></div>
<div class="band b1"><h2>Fixed one</h2></div>
<div class="text"><p>Normal content between bands.</p></div>
<div class="band b2"><h2>Fixed two</h2></div>
<div class="text"><p>The end.</p></div>

body{display:block;height:auto}
.text{min-height:70vh;display:grid;place-items:center;padding:40px;text-align:center;color:#cfc3c1}
.band{min-height:80vh;display:grid;place-items:center;text-align:center;
  background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat}
.band h2{margin:0;font-size:clamp(2rem,8vw,3.6rem);letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.b1{background-image:
  radial-gradient(circle at 25% 30%,#ffd166 0 7%,transparent 7.5%),
  radial-gradient(circle at 75% 60%,rgba(255,255,255,.18) 0 10%,transparent 10.5%),
  radial-gradient(circle at 40% 80%,rgba(255,255,255,.12) 0 14%,transparent 14.5%),
  linear-gradient(160deg,#e5603a,#8a3a22 60%,#3a0804)}
.b2{background-image:
  radial-gradient(circle at 70% 25%,#f08a5d 0 6%,transparent 6.5%),
  radial-gradient(circle at 20% 70%,rgba(255,255,255,.15) 0 12%,transparent 12.5%),
  linear-gradient(200deg,#6e2a18,#2a0f0b 70%)}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fixed background parallax</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{display:block;place-items:normal;height:auto}
.text{min-height:70vh;display:grid;place-items:center;padding:40px;text-align:center;color:#cfc3c1}
.band{min-height:80vh;display:grid;place-items:center;text-align:center;
  background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat}
.band h2{margin:0;font-size:clamp(2rem,8vw,3.6rem);letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.b1{background-image:
  radial-gradient(circle at 25% 30%,#ffd166 0 7%,transparent 7.5%),
  radial-gradient(circle at 75% 60%,rgba(255,255,255,.18) 0 10%,transparent 10.5%),
  radial-gradient(circle at 40% 80%,rgba(255,255,255,.12) 0 14%,transparent 14.5%),
  linear-gradient(160deg,#e5603a,#8a3a22 60%,#3a0804)}
.b2{background-image:
  radial-gradient(circle at 70% 25%,#f08a5d 0 6%,transparent 6.5%),
  radial-gradient(circle at 20% 70%,rgba(255,255,255,.15) 0 12%,transparent 12.5%),
  linear-gradient(200deg,#6e2a18,#2a0f0b 70%)}
</style></head>
<body>
<div class="text"><p>Scroll: the picture stays still,<br>the sections slide over it.</p></div>
<div class="band b1"><h2>Fixed one</h2></div>
<div class="text"><p>Normal content between bands.</p></div>
<div class="band b2"><h2>Fixed two</h2></div>
<div class="text"><p>The end.</p></div>
</body></html>