Changing <BODY> background images - where to start?
Code within my <HEAD> Tags;
-
<script language="JavaScript">
<!-- Activate cloaking device
var randnum = Math.random();
var inum = 9;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "bg1.jpg"
images[2] = "bg2.jpg"
images[3] = "bg3.jpg"
images[4] = "bg4.jpg"
images[5] = "bg5.jpg"
images[6] = "bg6.jpg"
images[7] = "bg7.jpg"
images[8] = "bg8.jpg"
images[9] = "bg9.jpg"
// Ensure you have an array item for every image you are using.
var image = images[rand1]
// Deactivate cloaking device -->
</script>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {
position:relative;
z-index:1;
padding:10px;
}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
Code within my <BODY> Tags;
-
<script language="JavaScript">
<!-- Activate cloaking device
document.write('<div id="page-background"><img src="' + image + '" width="100%" height="100%"></div>')
// Deactivate cloaking device -->
</script>
Now, this works fine with every manual refresh of the page and I can obviously get it to work with a <META> refresh, but I would like to do achieve this without resorting to this crude method.
Note that I have additional code to stretch the image to the client browser resolution.
I found this topic which look svery similar to what I want but doesn't have any code for the background image scaling ...
http://www.jqueryhelp.com/viewtopic.php?t=1815&highlight=chnaging+backgrounds
Where do I start? Can my code be modified subtley or do I need to start from scratch?
Thanks in advance.[/url]