一个部分的背景图像在不显示的敏感站点

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中设置就不会出现！当我有一个滑块到位时它工作正常，但一旦我删除了滑块，然后去了静态图像而不再出现＆gt;

Answer 1

在html文件中使用。

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

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

Answer 2

你的横幅类似乎缺乏宽度和高度，所以它可能会崩溃。你能在浏览器的开发者控制台中验证吗？

Answer 3

这篇文章可能已经过时了，但对于那些来这里得到答案的人来说，这是答案。

将以下行添加到css样式内容中的.banner

height: 100%;
width: 100%;

如果您想要自定义宽度，可以使用百分比进行播放，但如果您想在PX中使用特定的宽度和高度，则可以执行以下操作

height: 500px;
width: 1000px;

将宽度和高度更改为所需的宽度和高度。