Foundation 4 : Responsive background image issues when resizing - css

Question

I am trying to build a one page website using Foundation with a navbar, 4 background images to separate each of the sections. Using foundation the image resize well but as I am closing down the screen the sections are going further away verticaly revealing the white body background at the bottom of each images.
How I can work this around so that I maintain the proportion of the page from a large browser screen to a smartphone?
Here is an example of Html with the size of each images:
<div id="bg">
<img src="http://placehold.it/1900x1000" alt="">
</div>
<div style="background: white">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</p>
</div>
</div>
<div id="bg1">
<img src="http://placehold.it/1900x900" alt="">
</div>
<div style="background: #2adefe">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</p>
</div>
</div>
<div id="bg2">
<img src="http://placehold.it/1900x650" alt="">
</div>
<div style="background: ##683b17">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</p>
</div>
</div>
<div id="bg3">
<img src="http://placehold.it/1900x700" alt="">
</div>
<div style="background: black">
<div class="row">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation</p>
</div>
<div id="bg4">
<img src="http://placehold.it/1900x400" alt="">
</div>
and the type of CSS I use for each background image:
#bg {
display: block;
min-height: 559px;
margin-right: auto;
margin-left: auto;
background-size: 100%;
background-repeat: no-repeat no-repeat;