background image fadeIn problem

Question

I am using fadeIn effect on the body of my pages, but there is a particular page with a big background image which i have included in the body tag of that image however it does not fade in which ruins the effect. How can i achieve that? Here is my current code..

 $(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(3000);
});  

 body{
    background: #ffffff url("../images/test.jpg") no-repeat;
    z-index: -2;
}

possible duplicate of http://stackoverflow.com/questions/977090/jquery-fade-in-background-image — Abdul Kader, Apr 27 '11 at 10:08

score 3 · Accepted Answer · answered Apr 27 '11 at 10:19

I don't think it's possible to fade <body> -- a workaround would be to wrap everything in a container, and set an image on that.

HTML:

<body><div id="container">**all your site content goes here**</div></body>

JS:

$(document).ready(function() {
    $('#container').hide().fadeIn(3000);
});

fiddle: http://jsfiddle.net/ztXnZ/2/

edit: Interesting, a body tag's CONTENT can be faded but it will not act on any CSS backgrounds ON the body tag. Demonstrated here: http://jsfiddle.net/Fxvdz/

+1 same solution as I came up with, except [mine](http://jsfiddle.net/ywZqA/) had added "Star Wars"! :-) — andyb, Apr 27 '11 at 10:30

score 0 · Answer 2 · edited Apr 27 '11 at 10:19

0

Modify your code this way

$(document).ready(function() {
    $("body").css("display", "none");
    $("body").addClass("body1").fadeIn(3000);
});

create this CSS class

.body1 {
    background: #ffffff url("../images/test.jpg") no-repeat;
    z-index: -2;
}

edited Apr 27 '11 at 10:19

andyb

43,435
12
121
150

answered Apr 27 '11 at 10:10

abhijit

1,958
3
28
39

This does not work for me in Chrome. Can you create a demo on [jsfiddle.net](http://jsfiddle.net/)? – andyb Apr 27 '11 at 10:22
sure will try that n let u know – abhijit Apr 27 '11 at 10:43

background image fadeIn problem

2 Answers2