The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Help with "A Quick and Dirty Way To Randomize an Image"

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #24709

    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:


    …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)


    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


    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




    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.


    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/




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


    how did you get it to work?


    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)
  • The forum ‘Back End’ is closed to new topics and replies.