View Full Version : Fixed Image Website Background needs Rotating Images

05-28-2012, 05:43 AM

I have several HD 1920 X 1080 nature images I want to use as rotating background images on my website.

I found a code that adjusts the image size to any computer monitor size without distorting the image, and it keeps the image as no-repeat, and it is fixed in the background so when you scroll the page the body moves up and down, but the image stays in place sort of like a desktop background frozen in place without any scroll bars appearing.

Here is the code I used (inside the <head>) to get that feature:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<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;}
<!-- 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;}


<div id="page-background"><img src="http://musicmefree.com/images/bgimages/background-6l.jpg" width="100%" height="100%" alt="Smile">


<div id="content">


Here is how it turned out so far: http://musicmefree.com

BUT I want the image to change to a different image when someone refreshes the page or clicks on another page of my website. (I have about 40 different HD 1920X1080 nature images).

I loaded some different images on some of the different pages, but would rather have the image rotation feature. It is too time consuming trying to manually add a different image background to each page of my website.

Using the above code what do I need to add to it to allow for rotating images in the background when someone refreshes the page, or clicks on another page of my website?

Is this possible?

Thanks in advance for your help?