Center an background image
Please have a look at the above screen shot, I would want to center an 开发者_JS百科image with black background, but i'm getting some white space at the bottom. Please could any one help me to fix this.
CSS
.bgimg {
background: url('../images/GBS-Chronicle-Background-1.png') black no-repeat center;
}
div#cont {
height: 672px;
}
HTML
<body class="bgimg">
<div id="doc2">
<div id="hd"></div>
<div id="bd">
<div id="cont">
<div class="middle">
<p> hi hello </p>
</div>
</div>
</div>
<div id="fd"></div>
</div>
Try adding this:
html,body { height:100%; }
Try setting height:100%; on your .bgimg class.
Edit: You may also want to set padding:0;margin:0; to your .bgimg class as well just to make sure.
I guess GBS-Chronicle-Background-1.png is not high enough. you can either add background color to black or repeat the image along with Y.
Try changing the order of your background rule so the color comes first.
background: black url('../images/GBS-Chronicle-Background-1.png') no-repeat center;
try this too (as has been suggested above):
body {color:#000000;}
Also: I would suggest commenting out the Height of your content div as well. And/or setting the bkg-color of the content div to the same color as the body. Hope that helps! :)
加载中,请稍侯......
精彩评论