Need to fadeIn a webpage's entire contents on load but tiled bg pattern keeps doing the opposite
I have a webpage with a tiled background body image. It needs to be tiled because the designer wants it scalable with the browser window. It creates a very specific grid over which the rest of the site is designed.
There is also a white page border around it (created via a separate div with a higher z-index) because the designer wants to keep the pattern away from the sides of the browser.
I need to fade the following page in it's entirety. When I try to fade in the body the screen starts with the patter开发者_如何学运维n already there. And while playing around I've also managed to get the background to fades in but then everything else fades out. I have also tried placing the bg pattern in a div just below the body, but it seems to do strange things in Safari.
I have also tried the following tutorial, but to no avail:
http://blog.anselmbradford.com/2009/08/28/how-to-add-a-simple-webpage-fade-in-effect-using-jquery/
My thought then is to somehow build a white div overlaying everything, then fading that out. But how do I make this div cover everything, including the body background image?
I feel like I'm missing something big here...
Here is the relevant code I'm working with:
HTML:
<body id="home">
<div id="pgborder"></div><!-- end #pgborder-->
<div id="main">
<ul id="nav">
<li><a href="us.html">us</a></li>
<li><a href="work.html">work</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div><!-- end #main-->
<div id="logo">
<a href="home.html"><img src="images/logo.gif" width="345" height="24" alt="manuchugh logo"/></a>
</div><!-- end #logo-->
</body>
CSS:
html, body {
height: 100%;
font-family: "century gothic", arial, sans serif;
color: #8c8d8d;
font-size: 15px;
overflow: auto;
background:#fff url('../images/bg.gif');
}
#pgborder {
border: 22px #fff solid;
}
I would imagine it not fading because you're applying the background image to the html as well.
Try removing the following line from html, body {
background:#fff url('../images/bg.gif');
and placing it with a body selector in the CSS:
body {
background:#fff url('../images/bg.gif');
}
加载中,请稍侯......
精彩评论