PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » PHP » Randomize Background Image

Randomize Background Image

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 <head>

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.

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

Subscribe to The Thread

  1. Antti

    You could probably do with even shorter code:

    <!–
    body{
    background: url(images/bg-0.jpg) no-repeat;
    }
    –>

    ..if there are under 10 images.

    Reply ↓
    • Andrew Champ

      ??? I’m unsure about your method here. Where would you implement the php?

    • Antti

      Uh-oh, something seems to have gone wrong when I submitted that message. I meant:

      background: url(images/bg-0

      .jpg) no-repeat;

      This works of course only if there are <= 10 images.

      Let's see, if it works this time…

    • Chris Coyier

      Yeah I assumed there was some inline PHP going on there. PHP tags get stripped from WordPress comments, so if you need to post them, put a space between like this < ?

    • Antti

      OK,

      so one more time (you probably already guess where I’m going here):

      background: url(images/bg-0.jpg) no-repeat;

      Like that!

    • rotub

      lol :P

  2. Michael

    Great snippet! How would I pull the images from a folder (and adds or subtracts from the list everytime the user uploads or deletes a photo from that directory)?

    mz

    Reply ↓
    • Dylan

      Did you already find out how you can extract images from a folder?

  3. Bruno Correia

    I wrote this one for a client. Works well. It returns the path to a random image. In addition it won’t allow the same image to load twice consecutively .

    Reply ↓
  4. Bruno Correia

    I guess I’m not allowed to post a hyperlink on my comment above. – Sorry about that.

    Reply ↓
  5. ryan

    this is not working for me for some reason…

    Reply ↓
  6. Kristofer

    Hey thanks for this php-code/css it works great now, just modified the css a little bit and it was exactly the code i needed! :) Cheers

    Reply ↓
  7. Ant

    And much better is give random class to body, and define backgrounds in main css file.

    Reply ↓
  8. Rai

    Hello and thanks for sharing this…

    I will like to ask if this example is to apply a random image on the body? right?
    can I apply this to a #div? How I should do it?

    Blessings.
    Rai.

    Reply ↓
  9. barun

    hello, i am little confused here.. could u please help me.. i didn’t know where to put the php file.. please help… thank you

    Reply ↓
    • Gutem

      You have to put on your header.php, if you’re using one.
      The first code block you put ABOVE the DOCTYPE.
      The second code block you put before tag

  10. neel

    lol: i think your scripts are not working properly.these are copy paste form net and you never use these

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~