I'm trying to put a background image over an image.
Basically, it's to show if a 'user' has approved or denied something.
I want if approved to display a green tick over the user's display image.
I tried to create it but what I have does not work.
This is what I have so far:
Html
<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">
CSS
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.accepted{
background-image:url("tick.png") !important;
background-repeat:no-repeat;
background-position:right bottom;
z-index:100;
background-size:18px;
}
See jsfiddle for a working example.
The solution would be is to use wrapper with after
pseudo element for accepted
class:
.accepted:after {
content: '';
display: block;
height: 18px;
width: 18px;
position: absolute;
bottom: 0;
right: 0;
background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
background-repeat: no-repeat;
background-position: right bottom;
z-index: 100;
background-size: 18px;
}
HTML
<div class="small-profile-img accepted">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>