DIV background image not displayed in Firefox and Chrome
I'm having a strange problem where my DIV background is not displayed in Firefox and Chrome, but appears perfectly fine in IE. Upon searching on Stackoverflow, I found several similar questions but none of the solutions worked for me unfortunately.
I read in a forum that it might have something to do with browser caching or that I'm using Windows XP. I believe browser caching isn't the problem in my case considering I'm testing my page offline, and the only online testing I've done was right after I uploaded the files. I haven't had the chance to check it on a different Windows platform (e.g. Vista), but even if this problem doesn't occur on Vista, naturally I would like my background image to appear across all platforms.
Please find below, my CSS and source code:
CSS
body {
margin: 0px;
background:url(../images/bground.jpg) fixed bottom;
}
.area {
width:738px;
margin:0 auto;
padding:0 131px;
}
#menu {
width:738px;
height:41px;
position:absolute;
top:273px;
text-align: left;
}
#navlist li {
display: inline;
list-style-type: none;
padding: 0 20px 0 0;
}
#sec-menu {
height:41px;
position:absolute;
right:131px;
top:50px;
text-align: right;
border-bottom:1px solid #bbb
}
#sec-navlist li {
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
}
#register {
position:absolute;
right:131px;
top: 110px;
}
#content {
width:1000px;
position:absolute;
top:273px;
text-align: center;
}
Source Code
<body onload="MM_preloadImages('images/register-over.png')">
<div class="area" style="height:343px; background:transparent url('images/header.png') top no-repeat center; position:relative">
<div id="sec-menu">
<ul id="sec-navlist">
<li><a href="#" class="sec-menu">International Faculty</a></li>
<li><a href="#" class="sec-menu">Contact</a></li>
<li><a href="#" class="sec-menu">Sitemap</a></li>
</ul>
</div>
<a href="#"><img src="images/register.png" alt="Register for KLVS 2011 Now!" width="91" height="89" id="register" onmouseover="MM_swapImage('register','','images/register-over.png',1)" onmouseout="MM_swapImgRestore()" /></a>
<div id="menu">
<ul id="navlist">
<li class="menu-active">Home</li>
<li><a href="#" class="menu">About KLVS 2011</a></li>
<li><a href="#" class="menu">Programmes</a></li>
<li><a href="#" class="menu">Accommodation</a></li>
<li><a href="#" class="menu">Exhibitors & Sponsors</a></li>
<li><a href="#" class="menu">Call for Abstract</a></li>
</ul>
</div>
<div class="area" style="background:url(images/transparent-white_12.png) repeat-y"><br />
</div>
The Problem
My 'header.png' image is not displayed in the first DIV that uses class area
Not sure if this is vital information, but I also apply the area class on ano开发者_JAVA百科ther DIV calling a different background image, and that background image is displayed fine on all IE, Firefox and Chrome. I've tried removing position:relative and/or transparent from the first DIV but the problem still occurs.
I've also validated my file at http://validator.w3.org/ and I passed, so now I'm really stumped on what might have caused this. I really hope any kind soul on Stackoverflow could help me with this.
Thank you.
Your CSS has an error. Since you used shorthand, the top and center styles are confused. Put them together and it will be fine:
<div class="area" style="height:343px; background:transparent url('images/header.png') top center no-repeat ; position:relative">
top center no-repeat
加载中,请稍侯......
精彩评论