A way to fade in the background on load?

Question

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.

Answer 1

My solution:

HTML:

<img id='myImg' />

CSS:

#myImg{
    opacity: 0;              
    -moz-opacity: 0;         
    -khtml-opacity: 0;       
    filter: alpha(opacity=0); 
}

JS:

var img = document.getElementById('myImg'),
    steps = 30,
    appearTime = 1000;

img.src = "/path/to/img.gif";

img.onload = function(){
    for(i=0; i<=1; i+=(1/steps)){
        setTimeout((function(x){
            return function(){
                img.style.opacity = x;
                img.style.MozOpacity = x;
                img.style.KhtmlOpacity = x;
                img.style.filter = "alpha(opacity=" + (x*100) + ")";                    
            };
        })(i), i*appearTime);

    };
};

Answer 2

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.

Answer 3

Yep:

Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:

document.onload = function () {
  window.setTimeout (function () {
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
  }, 500);
};

In jQuery it would be

$(function () {
  $('body').css ('backgroundImage', 'url(/path/...)');
});

If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder <div/>, position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:

var x = new Image();
x.onload = function () {
  /*
    create div here and set it's background image to
    the same value as 'src' in the next line.
    Then, set div.style.opacity = 0; (best, when the
    div is created) and let it fade in (with jQuery
    or window.setInterval).
  */ };
x.src = "/path/to/img.jpg";

Cheers,

Answer 4

i see this link ,

http://fragged.org/dev/changing-and-fading-body-background-image.php

the idea is :

apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....

you can now reference the bottom layer by id and change the opacity.

all it needs is a stack / array of background mages to apply as a property to the layer...

Answer 5

I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.

The HTML:

<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>

The jQuery:

$(window).load(function() {

    $("#backgroundImage").fadeIn("slow");
});

Answer 6

Why not use a ready-made script: this one makes a background image fade-in on page load.

It also fits the image to the dimensions of the window, but this can be disabled if not needed.