Fading A Background Image In

by Drath

HTML

<div id="back"></div>
<h3>Stuff on top of the background.</h3>
<p>Other stuff.</p>

CSS

html { 
    height:100%;
}

body { 
    margin: 25px; 
}

#back {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -100;
}

JavaScript

$(document).ready(function() {
    $('#back').animate({opacity: 0}, 0).css({'background-image': 'url(http://vaughnroyko.com/jsfiddle/back.png)'}).animate({opacity: 1}, 2500);
});