Treehouse: Grow your CSS skills. Land your dream job.

Help with "A Quick and Dirty Way To Randomize an Image"

  • # April 27, 2009 at 10:47 pm

    Hi! Graphic designer, utter programming noob here. I’m trying to use the tip here ( … -an-image/) to randomize an image in my wordpress theme.

    The image is in my style.css file in the following lines of code:

    .logo h2{
    float:left;text-indent:-100000px;background:url(images/slogan_4.png) no-repeat left top;width:327px;height:94px;margin:10px 0 0 0px;

    I’m trying to swap out the slogan_4.png image randomly with slogan_1 through slogan_6, but replacing the number "4" with the following snippet:

    < ?php echo(mt_rand(1,6)); ?>

    …just makes the image disappear. Anybody know what I’m doing wrong? I know the 6 images are labeled correctly, since I can switch between them by just changing the 4 to a 3 in the code. (the image I’m trying to effect is the little blue monkey quote in the header)

    # April 28, 2009 at 12:30 am

    Hi, from the sounds of it, I think you are trying to add PHP to your CSS file. You can’t really do this.

    A possible fix would be to make multiple classes with your different background, and randomly fill in the class name where you want the random picture to go.

    so for example

    lets start with the css,

    .bg1 { background: #ff0066; }
    .bg2 { background: #0066ff; }
    .bg3 { background: #ff6600; }
    .bg4 { background: #cccc00; }
    .bg5 { background: #ccccff; }
    .bg6 { background: #a10000; }

    now lets right a php function that will randomly output one of those class

    function randomClass() {
    $num = rand(1,6); //will pick a number between and including 1 and 6
    echo ‘bg’.$num;

    and then for the html

    # April 28, 2009 at 2:41 am

    easiest way is to make a php script that changes the output.

    but keep the markup on the html page:


    //this div is not needed for you, i use it in a site, but this changes so did not add it to the php
    < ?php include('/www/abc/public_html/images.php'); //where your script is ?>


    < ?php /* STORE BANKS OF IMAGES AS INTEGER NUMBERS WITH A .jpg EXTENSION. ONCE STORED AND IMAGES UPLOADED, CHANGE THE $maxNumImages VARIABLE TO MAXIMUM NUMBER OF IMAGES IN THAT DIRECTORY */ //****** MAIN IMAGE SETTINGS ******** $maxNumImages = 10;// change this number to the total number of images $imageURL = ""; $imageExtension = ".jpg"; //****** RANDOM NUMBER GENERATOR ******** $num = rand(1, $maxNumImages); //****** GENERATING ARRAY OF IMAGES ******** for ( $counter = 1; $counter <= $maxNumImages; $counter += 1) { $image[$counter] = $imageURL . $counter . $imageExtension; } //****** OUTPUT OF IMAGE ******** echo "

    so take away your image declaration in the css, let the php do it

    NOTE: it is random, so you may load each time and get something new, sometimes you wont, but you could get the same image 3/4 times…… thats the luck of the draw

    EDIT: Just thought, you may be able to put your images.php file in the background declaration of the css e.g.
    #logo {background:url(;} not tested it, but it is a file and the end result is echo-ing out the actual image file.

    # April 28, 2009 at 6:24 am

    I put a tutorial on my blog on how to randomise images in wordpress recently, but it’s focused on background images. the principals are the same though: … ros-theme/



    # April 28, 2009 at 11:06 am

    Thanks, everyone! That last tip from Dave worked quick and easy on the first try. I swear, these forums restore my faith in humanity!

    # April 28, 2009 at 2:51 pm

    how did you get it to work?

    # April 29, 2009 at 1:13 pm

    I replaced




    and then created a "slogans" folder in my images directory that contained the pngs to be randomized and the "random.php" script I found here:

    Worked like a charm!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.