CODEWITHSUNDEEP
htmlcss
Eli Stone
Eli Stone

Reputation: 1555

Place a background image over an image

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.

jsfiddle

Upvotes: 0

Views: 2125

Answers (5)

Gregory Beyer
Gregory Beyer

Reputation: 88

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

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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/

Upvotes: 3

Kautil
Kautil

Reputation: 1331

set

position:absolute

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

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 0

Quentin
Quentin

Reputation: 943214

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

Upvotes: 2

Related Questions