I am using jQuery to load ina background image that fills the page width / height. I have the following in the Head:

$(document).ready(function() {
    $('body').css({
    'background-image' : 'url({HTML_BASE}images/backgrounds/randoms/{BACK_IMG})',
        'background-repeat' : 'no-repeat',
        'background-position' : 'center top',
        'background-attachment': 'fixed',
        'background-size': '100% 100%',
    });
    $('#home-promo').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: 'auto'
    });

    $('.model-search').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: '393'
    });

});

This works fine and can be seen at http://projects.snowshtechnologies.com/golden_dragon/home/

I want the BG image to fade in from the black background colour. I have looked at a few other threads on Stack that suggest its not possible as a body element defined in css, but in this scenario the BG image is being loaded in by jQuery. How would I go about adding a fade in to this code to bring the image in with a nice fadein?