Фоновое изображение неправильно отрегулирует размер экрана

Question

Я пытаюсь сделать отзывчивый сайт, используя skel.js и skel-panels.js. В основном, что делают эти библиотеки, вы можете создавать точки останова для размера экрана и позволять размещать контент в скрытых панелях при изменении размера экрана.

У меня есть изображение, покрывающее фон контейнера div. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь изменить размер экрана, фоновое изображение не «включает» новый элемент, вставленный с помощью skel-panels.js, поэтому становится меньше, чем я хочу.

Моя разметка:

<div id="intro"> 
    <!-- Nav --> 
     <div> 
      <nav id="nav"> 
       <a href="#">Home</a> 
       <a href="#">About</a> 
       <a href="#">Blog</a> 
       <a href="#" class="skel-panels-include" data-action="togglePanel" data-args="bottomPanel">Contact</a> 
      </nav> 
     </div> 
     <div class="container"> 
     <!-- Header --> 


      <div id="header"> 
       <h1 id="title">Title</h1> 
       <img id="logo" src="images/logo.png"> 
      </div> 
      <div> 
       <section id="hero"> 
        <h2>Title</h2> 
        <p>Catchphrase!</p> 
        <a href="#" class="button">Join the Fight</a> 
       </section> 
      </div> 
     </div> 
    </div> 

Мой CSS:

#intro { 
background:url(../images/bg.png) top center no-repeat fixed; 
position: relative; 
background-size: cover; 
text-align: center; 
color: #fff; 
} 

Это то, что это выглядит так:

Полноширинный - [1]: http://i.imgur.com/pFpcn3m.jpg

Узкий View - [ 2]: http://i.imgur.com/ZIA3nMt.jpg

Похоже, что разметка перепутана, когда вставлен новый div (кнопка навигации в узком представлении). Любые идеи были бы весьма полезны.

Answer 1

попробовать

#intro { 
    background: url(../images/bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}