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

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 中设置后不显示！当我有一个滑块时它工作正常但是一旦我移除滑块并转向静态图像而不是它不再出现>

原文由 DannyW86 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 html 文件中使用它。

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

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

原文由 Sushant Tayade 发布，翻译遵循 CC BY-SA 4.0 许可协议