<div class="srolling-background">
<div class="banner"></div>
<div class="banner"></div>
</div>
.banner {
background-attachment: fixed;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
/*The Slides*/
&:nth-child(1) {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/map-seattle.jpg);
}
&:nth-child(2) {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/map-seattle-path.jpg);
}
}
/* DEMO STYLES */
body {
background: #333;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.