HTML/CSS/JS div background slideshow

I have a div that fills the entirety of a page (portfolio style). The div has this style:

.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;
}

Basically, what I want to do is every X seconds change the url that the div points to for it's background image, but I am unsure on how to do this.

My markup currently looks like this:

<div class="image-head">
  <div class="centering-hack">
    <h1>Something HTML</h1>
  </div>
</div>

What's the simplest/best solution here?

Thanks!