Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel