How to periodically change background-image site-wide?

Question

I am trying to set up an random alternating background that changes periodically across the whole site. E.g. at any given point the random background image would be the same on every page for a period of time.

Currently I have background images that change every 30 mins with this javascript: (from here: http://www.blogfodder.co.uk/post/2008/01/JavaScript-CSS-Random-Background-Image.aspx)

The problem however is that each link randomizes the background on each new page.

function ChangeCSSBgImg() {
    if (!document.getElementById) return false;

    var MyElement = "bgimg" 
    var ImgPath = "../i/" 

    if (!document.getElementById(MyElement)) return false;

    var random_images = new Array ();
    random_images[0] = "bg1.jpg"; // these are the background images
    random_images[1] = "bg2.jpg"; 
    random_images[2] = "bg3.jpg"; 
    random_images[3] = "bg4.jpg"; 
    random_images[4] = "bg5.jpg"; 

    var $header = document.getElementById(MyElement);
    var $backgroundurl = $header.style.backgroundImage;
    var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

    if ($backgroundurl != ImgURL) {
        $header.style.backgroundImage = ImgURL; 
    }

    movement = setTimeout("ChangeCSSBgImg()",108000000); 
}


/* random number generator */
function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
/* trigger onload */
addLoadEvent(ChangeCSSBgImg);

Answer 1

Can you hash the current time to pick an image? e.g. a simplistic one would be, have six images, then pick the image based on the 2nd-to-last digit in the current time, e.g.

• 10:08 - pick image #0
• 10:15 - pick image #1
• 10:20 - pick image #2
• 10:51 - pick image #5

Answer 2

What I would do is either have programmatically generated CSS on the web server (i.e. a script with CSS output) or dynamically change the stylesheet link when generating the web pages.

Answer 3

You could store the background image info in the user's session and update it server-side periodically. This is assuming you're using a language that is parsed on the server though.

Answer 4

I recommend you don't store any info for this - it should work from a priori info, such as the system time as suggested by Jeffrey Kemp. This will make it much more stable and work across more user agents.

Getting a unix time stamp for instance, will allow you to change the background on a per second basis.

Remember that some users have slower connections, and may not load the background image immediately.

A simple way would be to use a setInterval that iterates through an array of images every 30 minutes, and resets after the last image is chosen.