Q:

Animate HTML Background Image Fade

I have a website where the background image is stretched to fit the entire screen. There are thumb nails where clicked will change the background image. I am trying to get a cross fade transition to happen when the background images are changing, but I can't seem to get it to work.
Right now, when the thumb nail is clicked, the entire screen (including the content) fades out, then fades in with the correct background image. I don't want the content to fade out... I'm just trying to get only the background images to fade out. I think my problem is that I am telling the entire HTML page to fade out, but I am unsure on how to target just the background image of the entire site.
CSS
html {
    background: url(../img/01.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript
$("#wrapper #thumbs figure img").click(function() {
    var id = $(this).attr('id');        
    $('html').fadeOut("slow", function() { });
    $('html').fadeIn("slow", function() {
        $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed');
    }); 
});

A:

Did you tried using Backstretch ?

