Paralax test

by amindunited

HTML

<div class="container">
  <div class="paralax p_1">
    
  </div>
  <div class="paralax p_2">
  
  </div>
  <div class="paralax p_3">
  
  </div>
  <div class="paralax p_4">
  
  </div>
</div>

CSS

.paralax {
  height: 50vh;
  /* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center center;

  /* Scale it nicely to the element */
  background-size: cover;
}

.p_1 {
  background-image: url('http://placekitten.com/200/300');
}

.p_2 {
  background-image: url('http://placekitten.com/g/200/300');
}

.p_3 {
  background-image: url('http://placekitten.com/300/300');
}

.p_4 {
  background-image: url('http://placekitten.com/g/300/300');
}