<div class="banner">
  <h1>Slide One</h1>
</div>
<div class="banner">
  <h1>Slide Two</h1>
</div>
<div class="banner">
  <h1>Slide Three</h1>
</div>

.banner {
	background-attachment: fixed;
  width: 100%;
  height: 100vh;
  /*The Slides*/
  &:nth-child(1) {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/paisley.png);
  }
  &:nth-child(2) {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/weather.png);
  }
  &:nth-child(3) {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/swirl_pattern.png);
  }
}

/* Demo Styles */
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 5rem;
}

// Lovely backgrounds courtesy of https://subtlepatterns.com/