javascript - 背景图像未正确调整以适应屏幕大小

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

这就是它的样子:

全 Angular - [1]: http://i.imgur.com/pFpcn3m.jpg

窄 View - [2]:http://i.imgur.com/ZIA3nMt.jpg

当插入新的 div(窄 View 中的导航按钮)时，标记看起来像是一团糟。任何见解将不胜感激。

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