WordPress.org

Ready to get started?Download WordPress

Forums

Random element in CSS (10 posts)

  1. Ozh
    Member
    Posted 10 years ago #

    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 ?

  2. hanni
    Volunteer Moderator
    Posted 10 years ago #

    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!

  3. Mark (podz)
    Support Maven
    Posted 10 years ago #

  4. andrisig
    Member
    Posted 10 years ago #

    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.

  5. Ozh
    Member
    Posted 10 years ago #

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

    This always loads the same picture :/
    (ALA's betterrotator or not :)

  6. Ozh
    Member
    Posted 10 years ago #

    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

  7. nutria
    Member
    Posted 9 years ago #

    I've found a similar PHP/CSS solution here:
    http://www.cb2web.com/tests/rotate.htm
    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
    luca

  8. Constantinos Kouloumbris
    Member
    Posted 9 years ago #

    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.

    CK

  9. syncbox
    Member
    Posted 7 years ago #

    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 pngbehavior.htc to present a random foreground image (png32 format). IE doesn't support png transparency, but pngbehavior.htc 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:

    http://dev.masilva.com/about-ma-silva/

    view in Firefox, then IE6

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

  10. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.