How do I make a full screen background change on refresh?

Question

I want to make the background image of this web page alternate pictures on refresh.

How could I accomplish this?

Offliberty does this. I've looked at the source code but can't quite figure it out. I found out that it's done with server side scripting and my host does support that, and that a script called sizzle is powering the Offliberty website but I'm just so confused when I look at the code.

Answer 1

You could easily do this on the client side as well if you want. Create multiple classes in your css:

backgr0 { background-image: url('images/somepic.jpg'); }
backgr1 { background-image: url('images/somepic.jpg'); }
backgr2 { background-image: url('images/somepic.jpg'); }
backgr3 { background-image: url('images/somepic.jpg'); }
backgr4 { background-image: url('images/somepic.jpg'); }

Then in your jQuery ready function:

$(function(){
   var backnum = Math.floor(Math.random()*5);
   $('body').addClass("backgr" + backnum);
});

Replace body with an #id of a div if needed.