title: Random background image for each div with the same class
body: <p>I would like to apply random background to each div with an <code>.item</code> class.</p>
  
  <p>I tried to do this with PHP and CSS, something like this:</p>
  
  <pre><code>&lt;?php
  $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg' );
  $i = rand(0, count($bg)-1);
  $selectedBg = "$bg[$i]";
  ?&gt;
  
  .item {
    background: url(example.com/images/&lt;?php echo $selectedBg; ?&gt;);
  }
  </code></pre>
  
  <p>It works, but every div has exactly the same background image (for example bg3.jpg), and I would like each individual div to have different random background (I don't mind if they repeat once in a while).</p>
  
  <p>I tried this:</p>
  
  <pre><code>.item {
  background: url(&lt;?php echo "example.com/images/bg".rand(1, 5).".jpg"; ?&gt;)
  </code></pre>
  
  <p>with the same result.</p>
  
  <p>I suppose I need to use JavaScript (which I have absolutely no experience with) to achieve that. I found a working solution for random background color:
  <a href="http://jsfiddle.net/VXG36/1/" rel="nofollow noreferrer">http://jsfiddle.net/VXG36/1/</a></p>
  
  <p>I would like to do exactly the same thing, but with background images.</p>