title: Simple javascript image randomizer doesn't actually load images
body: <p>I'm currently working on a site, where I want the background on the index (in this case an image.) to change every time you enter the site. So this is the solution that I came up with:</p>
  
  <pre><code>    var Index = {
      Actions: {
          setBackground: function() {
              var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
              var random = images[Math.floor(Math.random() * images.length)];
  
              alert(random);
              $("body").css({'background-image': 'url("../img/backgrounds/' + random + '");'});
          }
      }
  }
  Index.Actions.setBackground();
  </code></pre>
  
  <p>but for some reason, the background stays white. I did also try the actual switching like this:</p>
  
  <pre><code>document.body.style.backgroundImage = "../img/backgrounds/" + random;
  </code></pre>
  
  <p>But that also did nothing.
  Please note that the console is empty.</p>
  
  <p>Here is the CSS for the body object:</p>
  
  <pre><code>body {
      background-size:cover;
      background-position:center;
      background-attachment:fixed;
      width:100%;
      height:100vh;
      position:relative;
  }
  </code></pre>
  
  <p>Is there a reason that this wont work? And if so, how to fix it...</p>
  
  <p>Thanks.</p>