<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;
}