title: Random background image button?
body: <p>How can I create a button that changes the background image of the entire website to a random image?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
  function randomHero() {
    var heroPics = ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/musician-background-1680.jpg','https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/pink-floyd-division-bell-228953.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/northstar.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/womensrights.jpg'];
  
    $('body').css({
      'background' : 'url('+ heroPics[Math.floor(Math.random() * heroPics.length)] + ') no-repeat',
      'background-attachment' : 'scroll',
      'background-position' : '50% 50%',
      'background-size' : 'cover'
    });
  }
  
  randomHero();
  $('button').on('click', randomHero);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>