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.