body background-image fade in

Question

I'm trying to replicate the fade in the background image of this site. How would I go about doing so with jQuery?

possible duplicate of [JQuery - Fade In Background image](http://stackoverflow.com/questions/977090/jquery-fade-in-background-image) and just about every question in the "related" pane on the right side. — JJJ, Jun 30 '12 at 10:19

score 3 · Answer 1 · answered Jun 30 '12 at 10:19

3

Use an image as a background image. i.e., <img /> tag. Then use jQuery's .animate() function:

$(document).ready(function(){
    $('img.bg').animate({
        opacity: 1;
    }, 1000);
});

CSS:

.bg {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

HTML:

<img src="bgimage.png" class="bg" />

answered Jun 30 '12 at 10:19

Minor correction `Start with opacity 1 and then make it zero as it is fade in.` `:)` – Tats_innit Jun 30 '12 at 10:27
No right? He want's it to fade in. So, in that case, opacity must be 0 and should gradually become 1 right? – Praveen Kumar Purushothaman Jun 30 '12 at 10:28
`:)` you can see demo below, have a nice one! – Tats_innit Jun 30 '12 at 10:30

score 1 · Answer 2 · answered Jun 30 '12 at 10:25

Working demo http://jsfiddle.net/9HTkV/ (and coz I like hulk) :P

Start with opacity 1 and then make it zero as it is fade in.

This should help :)

code

        $('.box2').animate({
            opacity: 0
        });

CSS in start you want Opacity to be 1 and then make it 0.

.box2 {
    height: 500px;
    width: 700px;
    background: #000000;
    opacity: 1;
}

2 Answers2