A way to fade in the background on load?
background, javascript, jquery
Solution
I haven't done this myself, but it might work.
You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.
Problem
I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms). If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript? Update 9/19/2010: So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone. Add a `<div id="backgroundfade"></div>` to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered. Style as such - ``` #backgroundfade { position: fixed; background: #FFF /* whatever color your background is */ width: 100%; height: 100%; z-index: -2; } ``` Then add this to your JavaScript scripting file (jQuery required): ``` $(document).ready(function() { $('#backgroundfade').fadeOut(1000); }); ``` This has the effect of fading the `#backgroundfade` element (the box "covering" your actual background) out in 1 second upon DOM completion.