title: Change background image on page refresh
body: <p>I currently have some php that changes the background image of a div everytime the page is refreshed.</p>
  
  <p>In the head of my HTML I have this</p>
  
  <pre><code>&lt;?php 
  $bg = rand(1, 6); 
  $bgchange = $bg.".jpg"; 
  ?&gt;
  </code></pre>
  
  <p>and then this</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .cover {
    background-image: url('../img/backgrounds/&lt;?php echo $bgchange; ?&gt;');
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>As you can see this is a very simple bit of php it does do the job but I am having problems when the site is first loaded on a computer or if the internet is slow where the image fails to load.</p>
  
  <p>Any javascript guys that can recommend a solution to this I would greatly appreciate, I'm also thinking javascript will be better as the image can 'fade' in etc. I am referencing jquery-1.10.2 in my project.</p>
  
  <p>P.S. Solution does not have to be javascript if anyone knows how to improve my php code or can offer a reason why the code fails sometimes, that would be really helpful.</p>