chavad
2nd January 11, 04:51 PM
Dear Everyone,
Hi! I have three background images that are randomly chosen upon page refresh; the problem is that they show under the original image. Here is my code:
<head>
<script>
function dailyBackground(node,images)
{
node.style.backgroundImage = "url(\""+images[Math.floor(Math.random()*images.length)]+"\")";
}
</script>
</head>
<body>
<script>
var imgArray = new Array();
imgArray[0] = "images/addax.jpg";
imgArray[1] = "images/alligator.jpg";
imgArray[2] = "images/skorupski.jpg";
dailyBackground(document.body,imgArray);
</script>
<style type="text/css">html, body {height:100%; margin:0; padding:0;}#bg_box{width: 100%; height: 100%; top: 0; position: absolute; z-index: 0; }</style><style type="text/css">html {overflow-y:hidden;}body {overflow-y:auto;}#bg_box img{width: 100%; min-width: 1100px; position: fixed; height: auto; z-index: 0;}</style>
<div id="bg_box"><img src="images/addax.jpg" width="100%"></div>
</body>
If you take out the code in bold, then I see that the images show up, but under the original (addax.jpg) image. How can I either replace the images or make them appear on top of each other? I have a feeling something needs changed in the CSS....
Thanks so much!
Chava
Hi! I have three background images that are randomly chosen upon page refresh; the problem is that they show under the original image. Here is my code:
<head>
<script>
function dailyBackground(node,images)
{
node.style.backgroundImage = "url(\""+images[Math.floor(Math.random()*images.length)]+"\")";
}
</script>
</head>
<body>
<script>
var imgArray = new Array();
imgArray[0] = "images/addax.jpg";
imgArray[1] = "images/alligator.jpg";
imgArray[2] = "images/skorupski.jpg";
dailyBackground(document.body,imgArray);
</script>
<style type="text/css">html, body {height:100%; margin:0; padding:0;}#bg_box{width: 100%; height: 100%; top: 0; position: absolute; z-index: 0; }</style><style type="text/css">html {overflow-y:hidden;}body {overflow-y:auto;}#bg_box img{width: 100%; min-width: 1100px; position: fixed; height: auto; z-index: 0;}</style>
<div id="bg_box"><img src="images/addax.jpg" width="100%"></div>
</body>
If you take out the code in bold, then I see that the images show up, but under the original (addax.jpg) image. How can I either replace the images or make them appear on top of each other? I have a feeling something needs changed in the CSS....
Thanks so much!
Chava