Too many parallax images

Question

I'm making a static website on which I have too many parallax images. Basically each section is separated by a parallax image. Now the problem that I'm facing is, as I'm building my website and adding sections and more parallax images, some of the images near the bottom of the website are moving out of the frame. What I mean by this is, that the images are probably starting at the wrong position, and then as I scroll, they end up moving out of their div or frame and I see empty space underneath the image.

This is not happening for all images though; only images near the bottom of the website experience this problem. Furthermore, the lower an image is, the more pronounced this problem is.

Here is my code for inserting the parallax images:

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

Here is the CSS for this div:

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

Answer 1

So I solved this problem by making the images repeat. As I mentioned in the comments, I just discovered the crux of the problem. Each image starts moving as soon as you start scrolling on the website from the very top. This means that by the time you reach the bottom off the website, the images over there have moved too much and are out of the div.

So for example, I changed

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

to

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

and repeated doing this for every div or image with parallax.

I am concerned a little bit about performance and did notice my laptop heating up when I repeated the images and I have a very powerful machine (rMBP 15"). If anyone has a better solution, please post it here.

Answer 2

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