Random background image

In my opinion this is the worst way to do random images.

In the worst case scenario, the filename is cached and you never get a random image. In the best case your file is never cached, so you have to download it all time — either way its horrible.

If your server supports ‘glob’ you can do this:

<?php
  $backgrounds = glob('path/to/images/*.jpg');
  shuffle($backgrounds);
?>

that reads the paths to a directory full of jpegs into an array, then shuffles the array.

to retrieve a random path after the array has been shuffled, just use <?php echo $backgrounds[0] ?> wherever you want your path to appear.

Why is this better? — glad you asked.

This way uses the proper filename to the file each time, instead of masquerading as an image with the name “random.php”

This allows your users to cache EACH of the random backgrounds, so that on their next visit, they will load from cache much more quickly.

If you want to play with this you can see it in action in my header. Hit reload a few times… Once a header is downloaded once, it doesn’t need to be freshly downloaded each time it’s displayed.

i found a helpful article which did the trick for me:
http://sonspring.com/journal/easy-random-css-backgrounds

the actual code is from here: http://alistapart.com/articles/randomizer/

got it working on my page, looks great!

Hey all,

Having a bit of trouble using any of these scripts.

I’m trying to have a rotating bg image (about 3 or 4 of them).

Currently my css looks like this:

body {
background: #261706 url(img/bg.jpg) no-repeat center top;
font:75% verdana, arial, helvetica, tahoma, sans-serif;
line-height: 18px;
}

I changed it to

body {
background: #261706 url(rotate/rotate.php) no-repeat center top;
font:75% verdana, arial, helvetica, tahoma, sans-serif;
line-height: 18px;
}

But no luck.

Of cxourse I’ve uploaded and modified the rotate.php file but to no avail.

Perhaps someone out there has had better luck than I?

Any help would be appreciated!

Based on Ivovic’s suggestion, this is what I did and it’s working for me. Of course, if your server *does not* support glob this will not work. And aside from trial and error, I’m not exactly sure how to tell if your server does.

// Header rotation script based on suggestions found in this thread: http://wordpress.org/support/topic/169209
$backgrounds = glob('/var/www/html/somecrazyblog.com/wp-content/uploads/header-images/*.jpg');
// Glob seems to need the full path to the target folder. Site root just wasn't working.
shuffle($backgrounds); // Shuffle the folder contents.
$string = $backgrounds[0]; // Pick one image.
// Now delete the parts of the path before the site root.
$pattern = "@/var/www/html/somecrazyblog.com@";
$replacement = "";
$newString = preg_replace($pattern, $replacement, $string);
// And finally output the styles needed to place a background image in the header.
echo "<style type='text/css'>\n";
echo "#header {background: url('".$newString."') no-repeat top left;}\n";
// Obviously, if your header doesn't use "header" as its CSS id, you will need to change that.
echo "</style>";

This goes in the head of your header.php file.

Cheers

EDIT: fixed problem.

Here is a dramatically simple, astonishingly clean solution to pretty much every issue mentioned on this page.
There is no need for wordpress functions, arrays, complicated code editing, rotator.php files or ANYTHING. It also avoids having to manually <shift>+”Refresh” to load a new background image.

Here it is – to use, simply put the div ID and image folder paths for your site inside this:….

<div id="anyID" style="background:url(/yourimagefolderpath/<?= "img".rand(0,50).".jpg"; ?>) no-repeat left top;"> Your site text or other content </div>

0,50 in the code only means it will show up from img0 to img50.jpg at random, in the final url produced by the php snippet. if you have only 5 image files, replace 0,50 with 0,4

(Also, i think If you dont want ‘img’ as a prefix, just leave it empty. It should work.)

It works beautifully – This is free of any page-caching issues, since the url changes each time the page is called, and the page is reloaded since it has changed since the last time.The more images you have, the more ‘random’ it is.

I found this great solution by a google search for ‘random css background’, on the ‘page 2 results’ 🙂 . Am sharing it here in case anyone finds it useful, and this thread can be hopefuly closed.

Hi t31os,

As a WordPress novice, my php knowledge is quite zero. I use what works most easily, and this does the job pretty much all of the time.

Working with just 4 images, i did notice the randomness was not even across all 4 images, as you say.

However, i expect with more images, as i add them, it will even out. Also, this amount of randomness is ‘ok’ given the site requirement.

Its not mathematically exact, but its essentially functional.
Given its ease of use, which is most important, I can live with it.

A better, perfect solution is always welcome, of course. Where would the rest of us be if others like you did’nt get deep into the details, and show the way.

cheers,