Grow your CSS skills. Land your dream job.

Randomize Background Image

  • Rai
    # January 14, 2011 at 7:23 am

    Hello everyone,

    Someone can help me to apply this snippet of php (it is from this post)
    here is the instructions:

    1. ABOVE THE DOCTYPE

    Set up and array of filenames, which correspond to the file names of the images you are trying to randomize.

    < ?php
    $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

    $i = rand(0, count($bg)-1); // generate random number size of the array
    $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
    ?>

    1. CSS IN THE

    Normally you’d want to keep CSS out of the HTML, but we’ll just use it here to echo out the random file name we selected above.

    What I most do to apply this on #main-content for example?.

    Any help please!
    Thanks,
    Rai.

    Bob
    # January 14, 2011 at 7:49 am

    Replace the word body in the last bit of code you posted with #main-content probably.

    # January 14, 2011 at 7:50 am

    Basic CSS!



    Rai
    # March 2, 2011 at 2:23 pm

    You know, is not working for me, here is my code if you can check it.

    Thanks.


    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    < ?php
    $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

    $i = rand(0, count($bg)-1); // generate random number size of the array
    $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
    ?>

    >



    <br /> < ?php if (is_home()) { echo bloginfo('name');<br /> } elseif (is_404()) {<br /> echo 'Página no encontrada';<br /> } elseif (is_category()) {<br /> echo ''; wp_title('');<br /> } elseif (is_search()) {<br /> echo 'Resultado de la búsqueda';<br /> } elseif ( is_day() || is_month() || is_year() ) {<br /> echo 'Archivos:'; wp_title('');<br /> } else {<br /> echo wp_title('');<br /> }<br /> ?><br />









    < ?php wp_head(); ?>


    # March 2, 2011 at 6:13 pm

    hmmm… try writing it inline instead of in a style tag at the top of the page

    Rai
    # March 3, 2011 at 10:11 am

    You mean something like this?





    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    < ?php
    $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

    $i = rand(0, count($bg)-1); // generate random number size of the array
    $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
    ?>

    >



    <br /> < ?php if (is_home()) { echo bloginfo('name');<br /> } elseif (is_404()) {<br /> echo 'Página no encontrada';<br /> } elseif (is_category()) {<br /> echo ''; wp_title('');<br /> } elseif (is_search()) {<br /> echo 'Resultado de la búsqueda';<br /> } elseif ( is_day() || is_month() || is_year() ) {<br /> echo 'Archivos:'; wp_title('');<br /> } else {<br /> echo wp_title('');<br /> }<br /> ?><br />







    < ?php wp_head(); ?>

    Rai
    # March 3, 2011 at 12:09 pm

    It doesn´t work either.

    T_T

    # March 3, 2011 at 12:18 pm

    I’ve done this before:

    Rai
    # March 3, 2011 at 2:34 pm

    Thanks Jamy,

    what about the first code above the doctype, you make any changes?
    there is something I´m missing….

    # March 3, 2011 at 2:48 pm

    Wow jamy, that looks really nice and simple

    # March 3, 2011 at 3:07 pm

    @Rai No, mine is a stand alone script. It’s what I’ve used in production before to achieve the effect you seem to be looking for.

    @noahgelman Thanks =)

    Rai
    # March 29, 2011 at 10:26 am

    This never work for me so I find other way, and it works at the first time:

    After



    Add this code:



    Then create a file call it css.php on your theme folder and add this code on it:


    < ?php
    $f = array(
    1 => "http://tudominio.com/wp-content/themes/magiting/images/bgd_po.jpg",
    2 => "http://tudominio.com/wp-content/themes/magiting/images/img13.jpg",
    3 => "http://tudominio.com/wp-content/themes/magiting/images/img6.jpg",
    4 => "http://tudominio.com/wp-content/themes/magiting/images/img23.jpg",
    5 => "http://tudominio.com/wp-content/themes/magiting/images/img11.jpg",
    6 => "http://tudominio.com/wp-content/themes/magiting/images/img9.jpg",
    );
    $n = rand(1,6);
    ?>
    < ?php echo "$f[$n]";?>

    You need to change the file name to your files names,
    and you can add more images, just change where it say $n = rand(1,6); where “6” is the number of images you have.

    You also need to add more links to your images the “X” is what you need to change to the sequence of files you have.


    X => "http://tudominio.com/wp-content/themes/magiting/images/img9.jpg",

    I hope this can help someone as help me, I find it on this blog (spanish)

    # April 2, 2011 at 2:22 am

    Hello, I’m new at this. Is it possible to add a duration for this script? Let’s say 24hrs before the image changes to another image. Or better yet, can I assign a specific image to a specific day?

    Rai
    # July 20, 2011 at 4:40 pm

    Hello Hair,

    For sure you can do that. I ear to my teacher say something about that in a project.

    Rai.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".