title: Refreshing page with a new image
body: <p>I currently have a stagnant image on my site:</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="/stylesheets/normalize.css" media="all" rel="stylesheet" /&gt;
    &lt;link href="/stylesheets/master.css" media="all" rel="stylesheet" /&gt;
  
  &lt;script&gt;
  window.onload = function () {
  
      var images = [],
          i=1, indexImages = true,
          prefix = '../image/',
          extension = '.jpg';
  
      while (indexImages) {
          var a = new XMLHttpRequest(); a.open('GET', prefix+i+extension, false); a.send();
  
          if (a.status != 404) { i += 1; images.push(prefix+i+extension); } else {
              indexImages = false;
  
              localStorage['backgroundIndex'] = !localStorage['backgroundIndex']?0:+localStorage['backgroundIndex']+2&gt;images.length?0:+localStorage['backgroundIndex']+1;
              document.body.style.backgroundImage =  'url(' + images[+localStorage['backgroundIndex']] + ')';
  
          }
      }
  
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  body {
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-color: black;
  
      border-bottom: 8px solid  #7D8A28;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section id="card"&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It's just that I want it to be a different image each time the page refreshes, so it auto changes to 2.jpg, 3.jpg, 10.jpg, whatever. (There are hundreds to choose from)</p>
  
  <p>Could someone help me out with a solution? I'm not very good at this, and this is my first site.</p>
  
  <p>Thanks.</p>