title: How do I change the background image every X seconds?
body: <p>I have a <code>div</code> that fills the entirety of a page (portfolio style). The <code>div</code> has this style:</p>
  
  <pre><code>.image-head {
    background: url('http://placehold.it/1920x1080') no-repeat top center fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: black;
    text-align: center;
  }
  </code></pre>
  
  <p>Basically, what I want to do is every X seconds change the <code>url</code> that the <code>div</code> points to for it's background image, but I am unsure on how to do this.</p>
  
  <p>My markup currently looks like this:</p>
  
  <pre><code>&lt;div class="image-head"&gt;
    &lt;div class="centering-hack"&gt;
      &lt;h1&gt;Something HTML&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What's the simplest/best solution here?</p>
  
  <p>Thanks!</p>
  
  <p><em>Edit: I'm using Bootstrap 3 if the JS library makes anything easier</em></p>