html - 响应站点中某个部分的背景图像未显示

Question

基本上，我是第一次在 HTML5 中构建一个响应式网站，如果说我遇到了很多麻烦，那就太低调了。无论如何，我目前遇到的一个问题是我无法弄清楚如何获取显示横幅部分所需的图像!

这就是我要实现的目标:

但是我无法在不将波形图像内联的情况下显示它，我不想这样做，因为它需要响应!？

到目前为止，这是我的 html 代码:

<header>
    <h1></h1><!-- Logo -->

        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">HOW IT WORKS</a></li>
                <li><a href="#">OUR CUSTOMERS</a></li>
                <li><a href="#">PRICING</a></li>
                <li><a href="#">PARTNERS</a></li>
            </ul>
        </nav>
</header><!-- End of header -->

<section class="container">
    <h2 class="hidden">Lorem Ipsum</h2>
        <div class="banner">

        </div>

</section><!-- End of slider content -->

这是CSS:

.container {
width:auto;
margin: 0 auto;
position:relative;
}

.banner {
background-image: url(../img/banner-lg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

如果有人有任何他们认为可能有帮助的意见，我们将不胜感激!我真的不明白为什么背景图片在 css 中设置后不显示!当我有一个 slider 时，它工作正常，但是当我移除 slider 并转而使用静态图像时，它就不再出现了>

Answer 1

在 html 文件中使用它。

<style type="text/css">
  body{
       background:url("image.jpg");
       background-size: cover;       /* For flexibility */
       }
</style>

注意:将图像放在主文件夹中，而不是图像文件夹中。