How do I change the background image every X seconds?
<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>