title: Background image won't display 100% if it is generated at random
body: <p>I am making a website that has two background images, one of them is always the same i.e.:</p>
  
  <pre><code>background-image: url("../images/centre-image.jpg");
  </code></pre>
  
  <p>and the other is generated via php to show a background image at random:</p>
  
  <pre><code>    &lt;?php
        $bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.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
      ?&gt;
  
  &lt;img src="images/background-images/&lt;?php echo $selectedBg; ?&gt;" class="bg"&gt;
  </code></pre>
  
  <p>Making the first background the full size of the DIV no matter what size of the screen was easy enough:</p>
  
  <pre><code>div.centre-options {
      background-size: 100% auto;
  }
  </code></pre>
  
  <p>however if I try to add similar CSS to the random generated image it doesn't work (just shows it at its full jpg size and then repeats) and not sure show to solve the problem.</p>