<body>
<div class="parallax-slider"  id="slide1" data-speed="10">

</div>
<div class="parallax-slider" id="slide2" data-speed="20">
  </div>
<div class="parallax-slider" id="slide3" data-speed="15">
</div>
<div class="parallax-slider" id="slide4" data-speed="10">
 </div>
<div class="parallax-slider" id="slide5" data-speed="20">
</div>
</body>
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.parallax-slider {
  font-family: 'Elsie', cursive;
  color: #FFF;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  min-height: 100%;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  height: 600px;
  background-color:skyblue;
}

#slide1 {
  background-image: url('http://images.psxextreme.com/wallpapers/ps3/spiderman_chest_868.jpg');
}

#slide2 {
  background-image: url('//thesmashable.com/wp-content/uploads/2014/04/amazing_spider_man_2_movie_wallpapers_desktop_backgrounds_the_amazing_spiderman_2014_hd_wallpapers-31.jpg');
}

#slide4 {
  background-image: url('http://hdwallpapers.move.pk/wp-content/uploads/2015/07/marvel-black-spider.jpg');
}

#slide5 {
  background-image: url('http://www.dipnot.tv/wp-content/uploads/2016/03/10_The-Wolverine.jpg');
}

  $('.parallax-slider').each(function() {
    
    var $scrollslider = $(this);
    $(window).scroll(function() {
     var yPos = -($(window).scrollTop() /$scrollslider.data('speed'));
      console.log(yPos);
      var bgpos = '50% ' + yPos + 'px';
      $scrollslider.css('background-position', bgpos);
    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js