css - Foundation 4 : サイズ変更時のレスポンシブ背景画像の問題

Question

Foundation を使用して、各セクションを区切る 4 つの背景画像とナビゲーション バーを使用して、1 ページの Web サイトを構築しようとしています。ファンデーションを使用すると、画像のサイズが適切に変更されますが、画面を閉じると、セクションが垂直方向に遠くなり、各画像の下部にある白いボディの背景が表示されます. 大きなブラウザー画面からスマートフォンまでのページの割合を維持するために、これをどのように回避できますか?

各画像のサイズを含む Html の例を次に示します。

   <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>

各背景画像に使用する CSS のタイプ:

#bg {
  display: block;
  min-height: 559px;
  margin-right: auto;
  margin-left: auto;
  background-size: 100%;
  background-repeat: no-repeat no-repeat;