HoyHym Ho HoyHym Ho - 3 years ago 93
CSS Question

How do I put an image behind a button?

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download