1

我正在尝试使用 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

窄视图 - [2]：http: //i.imgur.com/ZIA3nMt.jpg

插入新 div 时（窄视图中的导航按钮），标记看起来会变得混乱。任何见解将不胜感激。

4

1 回答 1

0

尝试

#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;
}
于 2013-11-12T02:43:41.727 回答