Place a background image over an image - html

Question

Im trying to put a background image over an image.
Basically its to show if a 'user' has approved or denied something.
I want if approved to display a green tick over the users 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 working example.
jsfiddle

Answer 1

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>
http://jsfiddle.net/vpgjr/7/

Answer 2

Background images go behind foreground content. An <img> is foreground content.
The only way you could see the background image would be if the foreground image had translucent pixels over the background image.
The tick appears to be content (rather than decoration) though, so it should probably be represented as an <img> anyway.
<div class="image-container">
<img class="small-profile-img"
src="http://www.image.com/image.gif"
alt="">
<img class="approved"
src="tick.png"
alt="Approved">
</div>
.image-container {
position: relative;
}
.image-container .small-profile-img {
position: relative;
z-index: 2;
}
.image-container .approved {
position: absolute;
z-index: 3;
top: 50px;
left: 50px;
}

Answer 3

Why dont you use position:absolute
HMTL
<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
<div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
</div>
CSS
.wrap{
position:relative;
background:red;
height:auto; width:30px;
font-size:0
}
.wrap > img{
width:30px;
display:inline;
}
.inner{
position:absolute;
top:30%;
left:50%;
margin:-5px 0 0 -9px
}
DEMO

Answer 4

set
position:absolute
Then set left,top (bottom,right if needed) property.

Answer 5

yea, i'd go the other way around.
change the class of the img when it's accepted.
HTML:
<div class='holder'>
<img class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">
</div>
CSS:
.small-profile-img{
width:30px;
display:inline;
border:2px solid #000000;
}
.holder{
width:40px;
height:30px;
background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
background-size: 100%, 100%;
background-repeat:no-repeat;
background-position:center;
text-align: center;
}
.accepted{
border:none;
display:inline;
}
.unaccepted{
display:none;
}