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 between the bg images.

Thanks in advance.

回答1:

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]+')';
    }
}

回答2:

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

来源：https://stackoverflow.com/questions/6471809/change-pre-defined-body-background-image