<h2>scroll</h2>
<div class="container scroll">
<div class="content">Aliquam porta metus eleifend risus iaculis, vel aliquet libero laoreet. Nulla pharetra mi at lectus tristique, ut suscipit orci accumsan. Curabitur aliquam vestibulum nisi, ac posuere neque iaculis eu. Duis pellentesque ligula elementum cursus blandit. Etiam eleifend, lorem quis tristique bibendum, augue ipsum dapibus urna, vitae commodo sapien leo sit amet orci. Ut a mi eu nisi sodales porta.
</div>
</div>
<h2>fixed</h2>
<div class="container fixed">
<div class="content">Aliquam porta metus eleifend risus iaculis, vel aliquet libero laoreet. Nulla pharetra mi at lectus tristique, ut suscipit orci accumsan. Curabitur aliquam vestibulum nisi, ac posuere neque iaculis eu. Duis pellentesque ligula elementum cursus blandit. Etiam eleifend, lorem quis tristique bibendum, augue ipsum dapibus urna, vitae commodo sapien leo sit amet orci. Ut a mi eu nisi sodales porta.
</div>
</div>
<h2>local</h2>
<div class="container local">
<div class="content">Aliquam porta metus eleifend risus iaculis, vel aliquet libero laoreet. Nulla pharetra mi at lectus tristique, ut suscipit orci accumsan. Curabitur aliquam vestibulum nisi, ac posuere neque iaculis eu. Duis pellentesque ligula elementum cursus blandit. Etiam eleifend, lorem quis tristique bibendum, augue ipsum dapibus urna, vitae commodo sapien leo sit amet orci. Ut a mi eu nisi sodales porta.
</div>
</div>
.container {
background: url("https://picsum.photos/500/350") #444;
overflow-y: scroll;
height: 350px;
width: 500px;
margin: 16px auto 40px;
}
.scroll {
background-attachment: scroll;
}
.local {
background-attachment: local;
}
.fixed {
background-attachment: fixed;
}
.content {
margin: 24px 48px;
}
body {margin-bottom: 96px;font: 24px/1.8 Poppins, sans-serif;color: white;background: #111;text-shadow: 1px 1px 2px rgba(0,0,0,0.8);}
h2 {font: 32px "Roboto Mono", monospace;margin: 48px auto 24px;text-align: center;}
View Compiled
This Pen doesn't use any external JavaScript resources.