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

缩小视图 - [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;
}

背景图像无法正确调整到屏幕尺寸

1 个答案: