Code Snippets Gallery
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!
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.