Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  153] [ 6]  / answers: 1 / hits: 22424  / 15 Years ago, sun, june 28, 2009, 12:00:00

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() {

This has the effect of fading the #backgroundfade element (the box covering your actual background) out in 1 second upon DOM completion.

More From » jquery


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.

[#99225] Wednesday, June 24, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 418
Total Questions: 100
Total Answers: 114

Location: North Korea
Member since Fri, Nov 4, 2022
2 Years ago
faithemilys questions
Wed, Mar 31, 21, 00:00, 3 Years ago
Thu, Oct 15, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Sun, Feb 9, 20, 00:00, 4 Years ago
Fri, Dec 6, 19, 00:00, 4 Years ago