背景图像未正确调整到屏幕大小

Background image does not properly adjust to screen size

本文关键字：屏幕 调整 图像 背景      更新时间：2023-09-26

我正在尝试使用skel.js和skel-panel.js创建一个响应式网站。基本上，这些库的作用是允许您为屏幕尺寸创建断点，并允许您在屏幕尺寸更改时将内容放在隐藏面板中。

我有一个覆盖容器div背景的图像。我遇到的问题是，当我尝试更改屏幕大小时，背景图像没有"包含"通过 skel-panel 插入的新元素.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]： https://i.stack.imgur.com/B6hXo.jpg

窄视图 - [2]： https://i.stack.imgur.com/uV7MV.jpg

插入新的div 时，标记似乎被搞砸了（窄视图中的导航按钮）。任何见解将不胜感激。

尝试 

#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;
}
相关文章：