javascript - Too many parallax images -

i'm making static website on have many parallax images. each section separated parallax image. problem i'm facing is, i'm building website , adding sections , more parallax images, of images near bottom of website moving out of frame. mean is, images starting @ wrong position, , scroll, end moving out of div or frame , see empty space underneath image.

this not happening images though; images near bottom of website experience problem. furthermore, lower image is, more pronounced problem is.

here code inserting parallax images:

<div class="section parallax light-translucent-bg parallax-bg-5">   <div class="container">     <div class="call-to-action">     </div>   </div> </div> 

here css div:

.parallax-bg-5 {   background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat; } 

use background-attachment: fixed

example

* {      padding: 0;      margin: 0;      box-sizing: border-box;  }  h1,  h2 {      color: #fff;      text-align: center;      padding: 25px 0;      margin: 0;  }  .block-parallax {      overflow: hidden;      position: relative;  }  .block-parallax .parallax-bg {      background-attachment: fixed;         background-position: 0px 0px;      background-repeat: repeat;      height: 100%;      position: absolute;      width: 100%;      min-width: 1170px;      -webkit-background-size: cover;      -moz-background-size: cover;      background-size: cover;  }  .block-parallax .md-box {      padding: 200px 0 200px;      background: rgba(0, 0, 0, 0.75);      position: relative;      height: 100%;      text-align: center;  }  .block-parallax-1 .parallax-bg {          background-image: url('http://healthfitnessrevolution.com/wp-content/uploads/2013/10/olympic_boxing-featured-image.jpg');  }  .block-parallax-2 .parallax-bg {      background-image: url('http://www.seankernan.com/data/photos/201_1kampala_boxing_3273.jpg');  }  .block-parallax-3 .parallax-bg {      background-image: url('http://www.omaa.org.uk/sites/default/files/boxing-008.jpg');  }  .block-parallax-4 .parallax-bg {      background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcsw56f8j5e70gl8gzth4qgmq9wto-ag3u3ztgx6uhs1m8ljmou0sg');  }  .block-parallax-5 .parallax-bg {      background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2014/08/boxing-hd-wallpapers-of-high-resolution-free.jpg');  }  .block-parallax-6 .parallax-bg {      background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:and9gcs65xrl17ug548rzu04ahb6oemavkg2mgtyny2t4tllnamqfcka');  }  .block-parallax-7 .parallax-bg {      background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcsc8mbv8rociq8pg7eaj3-6crom0p75hnbwvjgarkotpfwsj9u6');  }  .block-parallax-8 .parallax-bg {      background-image: url('http://thumbnails.cbsig.net/cbs_production_showtime/cbs_production_showtime/2009/09/25/sports/boxing/193/694/boxing_supersix_farhood_cbsan.jpg');  }  .block-parallax-9 .parallax-bg {      background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:and9gcr2xsmnkmhmd5rn8lvbfd6hgwgllirwwczw433smgfpush3iu1agw');  }  .block-parallax-10 .parallax-bg {      background-image: url('http://www.mymmainfo.com/wp-content/uploads/2011/12/pay-per-view-boxing.jpg');  }

<section class="block-parallax block-parallax-1">      <div class="parallax-bg"></div>      <div class="md-box">           <h1>background 1</h1>      </div>  </section>  <section class="block-parallax  block-parallax-2">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 2</h2>      </div>  </section>  <section class="block-parallax  block-parallax-3">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 3</h2>      </div>  </section>  <section class="block-parallax  block-parallax-4">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 4</h2>      </div>  </section>  <section class="block-parallax  block-parallax-5">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 5</h2>      </div>  </section>  <section class="block-parallax  block-parallax-6">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 6</h2>      </div>  </section>  <section class="block-parallax  block-parallax-7">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 7</h2>      </div>  </section>  <section class="block-parallax  block-parallax-8">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 8</h2>      </div>  </section>  <section class="block-parallax  block-parallax-9">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 9</h2>      </div>  </section>  <section class="block-parallax  block-parallax-10">      <div class="parallax-bg"></div>      <div class="md-box">           <h2>background 10</h2>      </div>  </section>

fiddle