Html div 内的背景图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18802383/
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 inside div not showing up
提问by user2740515
So I was working on this site and I had the displaying how I was wanting. After working on a lower page banner all of a sudden everything disappeared and all I was left with was the background Image in the Body.
所以我在这个网站上工作，我有我想要的展示方式。在较低的页面横幅上工作后，突然一切都消失了，只剩下身体中的背景图像。
Can you figure out why the topImage id does not display? It is frustrating as hell to see it work one second and then not the other:
你能弄清楚为什么 topImage id 不显示吗？看到它在一秒钟内起作用而另一秒钟不起作用真是令人沮丧：
<style>
body
{
background-image:url("images/Background.gif");
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center top;
}
#topImage
{
position:absolute;
background-image:url("images/Top-Banner.gif");
background-repeat:repeat-x;
width:100%;
top:0px;
left:0px;
}
</style>
<body>
<div id="topImage"></div>
</body>
Sorry if this a really basic question, I am kind of new at this.
对不起，如果这是一个非常基本的问题，我对此有点陌生。
回答by Mathijs Flietstra
#topImagedoesn't have a height set, and no elements inside it which would give it a height.
#topImage没有设置高度，并且里面没有元素可以给它一个高度。
#topImage
{
position:absolute;
background-image:url("images/Top-Banner.gif");
background-repeat:repeat-x;
width:100%;
height: 100px; /* Change to the height you need */
top:0px;
left:0px;
}
Or just stick an imgtag inside the divinstead of using background-image, that would work as well.
或者只是img在里面贴一个标签div而不是使用background-image，那也可以。
回答by Manjeet
try using the following syntax
尝试使用以下语法
#topImage
{
position:absolute;
background-image:url("../images/Top-Banner.gif");
background-repeat:repeat-x;
width:100%;
height: 100px; /* Change it to auto if you need to div to adjust automatically according to contents inside it */
top:0px;
left:0px;
}
hope that sorts out the problem
希望能解决问题
