How do I add an image to a progress bar in HTML/CSS?

I'm basically trying to set up a progress bar in HTML and CSS with JSFiddle for a website. I want to overlay an image over the bar that can move with the bar until it reaches the goal, however I cannot figure out how to do so. Any help would be greatly appreciated.

CSS:

.box {
    border-radius: 10px;
    padding: 25px;
    background-color: rgba(51, 51, 51, 0.96);
    text-align: center;
}
#progressbar {
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 2px;
}
#progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    width: 30%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}
.text {
    color: #fff;
    margin-top: 15px;
    font-size: 21px;
    font-weight: bold;
}

HTML:

<body>

  <h1>Help Mr. Finley get to the finish line!</h1>

  <div class="box">
      <div id="progressbar">
          <div></div>
      </div>
      <div class="text">Marching... 30%</div>
  </div>

</body>

Solution

Here is a fiddle: https://jsfiddle.net/u3urw5wy/

Add in background-image:url(AddImageUrlHere) to replace background-color: #fff; as below:

#progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image:url(http://upstreamonline.com.cdn.bitbit.net/incoming/article1250137.ece/alternates/article_main/Cross%20the%20line%20sprint%20finishing%20tape%20runner%20athletics.jpg);
    width: 30%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}