How do I put an image behind a button?

Issue

So I made this mockup and I'm trying to get the stripes behind my buttons. I've tried using borders-image, background-image, borders with linear gradient on added divs/buttons but none worked

https://jsfiddle.net/hoyhym/txsgcx5b/ this is my latest try, the border becomes a thick black border instead of the image, which does show in the .headerbutton but is too wide

<div class="headerbutton">
   <a href="#" class="button">Ontdek ons programma</a>
</div>

.headerbutton {
  text-align: center;
  padding-bottom: 3rem;
  margin-top: 4rem;
  //border: 10px solid black;
  //border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}

.button {
  font-size: .8rem;
  color: white;
  background-color: black;
  padding: .9rem .9rem .7rem;
  text-decoration: none;
  border: 10px solid black;
  border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}

Solution

A much better way to achieve this is by using pseudo element :after.

jsFiddle

.button:after{
   content:"";
   position:absolute;
   width:100%;
   height:100%;
   top:5px;
   left:5px;
   background: url(http://i.imgur.com/dCwAQsB.png) repeat;
   z-index:-1;
 }

But if you insist on using border you need background-clip:padding-box; to prevent the background color from coloring the border itself.

Answered By - Miro