When I was creating the concept of my Buffy Skin for my journal, I knew that I had too many images to just use one on each sidebar. So I went on a search for a way to do random images.
But, my other quandry was that I wanted to do random images as backgrounds with words on top of them. So I took my first trip in the php manuals and figured out how to randomly pick a background and stick it into a div background.
Note, this isn't nearly as terrifically full-scale as Lynda's tutorial. If you are looking for something with random filenames and differing widths, hers is the way to go. But for the basics, I really like how this turned out….
First off, I saved all of my images as the same size pictures with a gradient so that text could be seen on top of them. I snuck different closeups and points of views into the different pictures.
I named each image a number from 1 to 20. (1.jpg, 2.jpg, and so on), and placed them in a directory on my server.
Then I found the php command for selecting a random number:
<?php echo rand(1,20) ?>
That just means – give me a random number between (and including) 1 and 20.
Because PHP processes before CSS does, I could generate this random number by putting inside of an inline style command.
<div style="background-image:url(http://love-productions.com/hopelessromantics/skins/nav/buffy/<?php echo rand(1,20) ?>.jpg);>sidebar text here</div>
This just tells it to take that random number that we generated and use it as a file name for the background image of the div.
And that's it! I saved this inside of my skin header (which is .php) with a bit more formatting added, and I've got different backgrounds with just a reload.
Note: Because I used two sidebars, everyonce in a while I get the same image on each sidebar. Something else I might research in the future would be a way to echo a random number that is different than the one that already has been echoed on the other side of the page. But for all intensive purposes, it does its job, and gives me great fun to see what combination of people I might end up with on my sidebars.