My new website: Rotating background

[goflish]

My website: www.caversia.com

 

I want to have the background image of the website change when players refresh the page (or on each visit) by setting several background images.

 

Can anyone point me in the right direction?

[Arty]

My website: www.caversia.com

 

I want to have the background image of the website change when players refresh the page (or on each visit) by setting several background images.

 

Can anyone point me in the right direction?

is it created via html?

[mantylt]

It's a wordpress site, so you can modify your template (probably index.php), find a place where background is defined and replace that part with php script which randomly picks one of predefined backgrounds.

 

Another way is using javascript or jquery. Something like this. http://stackoverflow.com/questions/10867503/change-background-image-in-body

[MrLewisMHarris]

I don't see the point, because people with worse internet will have to load a new image, and background images need to be hi-res to actually not look super stretched and ugly...

 

but I will help you the best I can.

 

My first thought would be to make a cookie which is read in javascript to tell it which background it had before, and to simple use a different one, but this is too general, and obviously it will most likely be a random background, whereas a hard coded list of background would just be far simpler to make.

 

my second thought would to check websites code where similar things apply/happen. I know I've seen this same concept before on other websites (though I can't remember where) it'd be a good idea to go have a look at those.

 

my third and final thought was to have a quick check on google (which I'll assume you've already done) and found a few stackoverflow articles, like this one, this one and this one.

 

I'll summarize for you from this one:

 

• You'll need you're images background images in a variable, like this:

1. var images = [    "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",    "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",    "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",    "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];

• next make a function that find out the amount of images in your variable "Images" and does a quick math.floor adjustment to find 1 image from them. Like this:

• function randImg() {    var size = images.length; //new var, size = amount of images in your var "images"    var x = Math.floor(size * Math.random()); // new var, x = size * random number    document.getElementById('image').src = images[x]; // writes this to "image" element}

• Obviously you are going to need to change the elemend Id with your background body img, so replace the last line "document.getElement..." with:

• var background = "url('" + images[x] + "')" //a new var that puts the URL in the proper css placedocument.body.style.backgroundImage = background; //it makes the random image the css background

that should sort it. Hope this helped, any further help just reply.

 

You can also put as many images in the var "images" as you like

Edited May 5, 2015 by MrLewisMHarris