Support » Themes and Templates » Random element in CSS

  • Heya peeps

    I wrote a small random.php that picks a random gif, no problem, and my css is like :

    #div1 {background: url(random.php);}
    #div2 {background: url(random.php);}
    #div3 {background: url(random.php);}

    My problem is : it seems the random.php is parsed once, so all the divs have the same random image when the page loads.
    Any clue to make it really random ?

Viewing 9 replies - 1 through 9 (of 9 total)
  • First thing that springs to mind is to have random1.php, random2.php and so on each with the same content – and have
    the background of div 1 as random1 and so on.
    Some on after me will probablly point out a better, more technical solution though!

    Mark (podz)


    Support Maven

    Hmm .. I have never seen any one try this before. I could be wrong but I do not think this is possible. One solution would be to create a CSS class for every possible image and then do the random bit in the page itself but not the CSS file.

    Hmm, actually I think it’s not even a .CSS but a php problem :
    <img src="random.php />
    <img src="random.php />
    <img src="random.php />

    This always loads the same picture :/
    (ALA’s betterrotator or not 🙂

    andrisig : yes, I think too. I think I’ll go to something I wanted to do for a long time : use a server-side CSS file, ie wp-layout.php instead of .css, that would be a lot easier 🙂
    Thanks all anyway

    I’ve found a similar PHP/CSS solution here:
    It works with IE but not with Firefox.
    In Firefox I’ve to refresh to see the backgroun change..
    I hope this help
    sorry for my freaky eng

    Why don’t you do what I did.

    Create the images you want like a series. ie. header01.jpg, header02.jpg etc and then add your css code into your header template.
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/head0<?php echo rand(1, 7); ?>.jpg") no-repeat bottom center; }
    And you are done. the php rand(1, 7); function will create a random number between 1 and 7 inclusive.
    Problem solved simple and easy.




    wow. I used this idea
    <?php echo rand(1, 7); ?>
    to pull in a random image and yes, it works (in this case, it is a foreground image, not background via css)

    I was hoping this would fix a problem I am having using rotate.php and to present a random foreground image (png32 format). IE doesn’t support png transparency, but fixes that. Only, when the image is randomly selected using rotate.php, it fails to process the png to make the background transparent. Bummer.

    So the above rand function works, but NOW, in IE, the whole image is transparent – even the non-transparent bits! I can see that the image is there by looking in the source code… and, of course, it is all working just fine in Firefox. Too WEIRD.

    Any ideas, anyone? THis is obviously some issue with when things are processed – the order in which the image is selected and then transparency applied… but I cannot figure out a fix for the life of me. THere’s no flexibility in this – I have to have png32 and it must be a random image.

    This is all just in the beginning stages, but if you want to see the missing image, here’s a url:

    view in Firefox, then IE6

    (nothing tested for mac or other browsers at this point, just rough layout, etc)

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    syncbox: Are you talking about the cork image in the bottom right that keeps changing? If so, what’s wrong with it? It looks fine to me in both Firefox 1.5 and IE 6.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Random element in CSS’ is closed to new replies.