Change pre-defined body background image

I found this script to change the body's background image when you click a link. It works, great except the only problem is is that I cannot have a pre-defined bg image in the css or else it won't change.

So I remove the css for the background image and it switches the images fine, but I want an image to be default to start with.

Script:

    <script language="JavaScript">
<!--

var backImage = new Array(); // don't change this

backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

Link:

<a href="javascript:changeBGImage(1)">Change2</a>

And, for example, I want bg0.png to be the background by default when the page loads.

It would also be great if it was possible to fade b开发者_JAVA技巧etween the bg images.

Thanks in advance.

Keep the background in the CSS, and use this code instead

var backImage = [
    "images/bg0.png",
    "images/bg1.png",
    "images/bg2.png",
    "images/bg3.png",
    "images/bg4.png",
    "images/bg5.png"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
}

To change the background if you have one defined in the css you need to alter: document.body.style.backgroundImage attribute