Randomly change a background image when the page has loaded
The above example shows the background of a div changing when the page loads by referencing the div
document.getElementById("id").style.backgroundImage="url("+imgArray[num]+")"
To change the background of the page you reference the body of the page
document.body.style.backgroundImage="url("+imgArray[num]+")"
The following script example is set to change the background image of the page
<script type="text/javascript">
<!--
imgArray=["pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg"]
function changeBg(){
num=Math.floor(Math.random()*imgArray.length)
document.body.style.backgroundImage="url("+imgArray[num]+")"
}
// add onload="changeBg()" to the opening body tag
// -->
</script>
If you do not want to repeat the image or you want to position the image include the following in the script
document.body.style.backgroundRepeat="no-repeat"
document.body.style.backgroundPosition="x y"