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

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

Answer 1

在 html 文件中使用它。

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

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