Code Snippet
Randomize Background Image
1. Above the DOCTYPE
Set up and array of filenames, which correspond to the file names of the images you are trying to randomize.
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>1. CSS in the <head>
Normally you'd want to keep CSS out of the HTML, but we'll just use it here to echo out the random file name we selected above.
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
You could probably do with even shorter code:
<!–
body{
background: url(images/bg-0.jpg) no-repeat;
}
–>
..if there are under 10 images.
??? I’m unsure about your method here. Where would you implement the php?
Uh-oh, something seems to have gone wrong when I submitted that message. I meant:
background: url(images/bg-0
.jpg) no-repeat;
This works of course only if there are <= 10 images.
Let's see, if it works this time…
Yeah I assumed there was some inline PHP going on there. PHP tags get stripped from WordPress comments, so if you need to post them, put a space between like this < ?
OK,
so one more time (you probably already guess where I’m going here):
background: url(images/bg-0.jpg) no-repeat;
Like that!
lol :P
Great snippet! How would I pull the images from a folder (and adds or subtracts from the list everytime the user uploads or deletes a photo from that directory)?
mz
Did you already find out how you can extract images from a folder?
I wrote this one for a client. Works well. It returns the path to a random image. In addition it won’t allow the same image to load twice consecutively .
I guess I’m not allowed to post a hyperlink on my comment above. – Sorry about that.
this is not working for me for some reason…
Hey thanks for this php-code/css it works great now, just modified the css a little bit and it was exactly the code i needed! :) Cheers
And much better is give random class to body, and define backgrounds in main css file.
Hello and thanks for sharing this…
I will like to ask if this example is to apply a random image on the body? right?
can I apply this to a #div? How I should do it?
Blessings.
Rai.
hello, i am little confused here.. could u please help me.. i didn’t know where to put the php file.. please help… thank you
You have to put on your header.php, if you’re using one.
The first code block you put ABOVE the DOCTYPE.
The second code block you put before tag
lol: i think your scripts are not working properly.these are copy paste form net and you never use these