Html 响应式站点中某个部分的背景图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19756990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image for a section in a responsive site not displaying
提问by DannyW86
Basically i am building a responsive site in HTML5 for the first time and to say im having a lot of trouble would be an under statement. Anyway one of the issues im stuck with at the moment is i cant figure out how to get an image i need for a banner section to display!
基本上，我是第一次在 HTML5 中构建响应式网站，如果说我遇到了很多麻烦，那将是一种低估。无论如何，我目前遇到的问题之一是我无法弄清楚如何获取我需要显示横幅部分的图像！
This is what im trying to achieve:
这就是我试图实现的目标：
But i cant get the wave image to display without putting it inline which i dont want to do as it needs to be responsive!?
但是我无法在不将其内联的情况下显示波形图像，我不想这样做，因为它需要响应！？
here's my html code so far:
到目前为止，这是我的 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 -->
and here is the css:
这是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;
}
If anyone has any input that they think might help it would really be appreciated! I really don't understand why the background image doesn't just show up once it has been set in the css! When i had a slider in place it worked fine but as soon as i removed the slider and went for a static image instead it no longer appears>
如果有人有任何他们认为可能有帮助的意见，我们将不胜感激！我真的不明白为什么背景图像一旦在 css 中设置就不会显示！当我有一个滑块时，它工作正常，但是一旦我移除滑块并转到静态图像，它就不再出现>
回答by Sushant Tayade
Use this in html file.
在 html 文件中使用它。
<style type="text/css">
body{
background:url("image.jpg");
background-size: cover; /* For flexibility */
}
</style>
Note: Put image in main folder not in images folder.
注意：将图像放在主文件夹而不是图像文件夹中。
回答by trnelson
Your banner class seems to be lacking width and height so it may be collapsing. Can you verify in the developer console of your browser?
您的横幅类似乎缺少宽度和高度，因此它可能会折叠。您可以在浏览器的开发者控制台中进行验证吗？
回答by iStudLion
This post might be old, but here's answer for those who came here to get answer.
这篇文章可能很旧，但这里是为那些来这里寻求答案的人提供的答案。
add the following lines to the .bannerin the css style thing
.banner将以下行添加到css 样式的东西
height: 100%;
width: 100%;
If you want custom width you can play with the percentage, but if you want a specific width and height in PX you can do the following
如果您想要自定义宽度，您可以使用百分比，但如果您想要 PX 中的特定宽度和高度，您可以执行以下操作
height: 500px;
width: 1000px;
Change the width and height to your desired width and height.
将宽度和高度更改为您想要的宽度和高度。
