<div class="wrapper"> <!-- wrapper div starts -->
  
  <div class="fixed-bg bg-1">
    <h1>Fixed Background scrolling</h1>
  </div>
  
  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna. Etiam sodales arcu at lectus porttitor accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id urna dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et pharetra justo, quis suscipit risus. Maecenas tincidunt efficitur ex in pharetra.</h3>
  </div>
  
  <div class="fixed-bg bg-2">
    <h1>Fixed Background scrolling</h1>
  </div>
  
  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna.</h3>
  </div>
  
  <div class="fixed-bg bg-3">
    <h1>Fixed Background scrolling</h1>
  </div>
  
</div> <!-- wrapper div ends-->

@import url('https://fonts.googleapis.com/css?family=Quicksand');

html,body {
  height: 100%;
}

.wrapper {
  height: 100%;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
  word-spacing: 4px;
  letter-spacing: 1px;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%; 
  width: 100%;
  color: white;
  text-align: center;
  display: table;
}

.fixed-bg h1 {
  display: table-cell;
  vertical-align: middle;
}

.scroll-bg {
  background-color: #0f0f0a;
  padding: 10px 70px;
  color: #676767;
}

/* first section */

.bg-1 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/dk3s266jb5klmba/bg1.jpg');
}

/* third section */

.bg-2 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/jcord1lxh30e02z/bg2.jpg');
}

/* fifth section */

.bg-3 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/rsk15kp7azmsi27/bg3.jpg');
}