CODEWITHSUNDEEP
csshtmlz-index
Pollux Khafra
Pollux Khafra

Reputation: 862

Make the image inside a div appear behind its div background

I have a div that has background that is partly transparent with a watermark. Inside of the div I'm calling an image but I want that image to appear behind the background of the div so I can have the watermarked transparent div background appear over the image. Is that possible? Here's the css that I have that isn't working...

.artist-container {
background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    z-index:331;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:330;
    position:relative;
}

Upvotes: 3

Views: 20654

Answers (5)

animuson
animuson

Reputation: 54729

I whipped up a small sample using some spans, which won't add any semantic content to your document and will still maintain the semantic meaning of your image.

HTML:

<span class="cover_contain">
   <img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
   <span class="cover_image"></span>
</span>

CSS:

span.cover_contain {
    display: inline-block;
    position: relative;
}
span.cover_image {
    display: block;
    background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

jsFiddle Live Preview

Upvotes: 3

kizu
kizu

Reputation: 43224

You can use the negative z-index, but in that case you must have the wrapper not to have any z-index. It's one of the features of stacking context.

Here is a demo fiddle: http://dabblet.com/gist/1731538

And the code for you would be something like this:

.artist-container {
    background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:-1;
    position:relative;
}

Upvotes: 0

driedoezoe
driedoezoe

Reputation: 185

it's not possible to put a background in front of an image of the image is in that element. You can simply use the main image as background, or:

what you could do

<div class="holder">
    <img src=".." class="main_image">
    <img src=".." class="watermark">
</div>

.holder {
    width:100px;
    height:100px;
    position:relative;
    display:block;
 }

 .main_image {
     position:absolute;
     top:0;
     left:0;
     z-index:0;
 }
.watermark {
     position:absolute;
     top:0;
     left:0;
     z-index:9;
 }

Upvotes: 0

Sagar Patil
Sagar Patil

Reputation: 1948

By giving .artist-container a higher z-index, you are placing it higher in the stacking order than the child image, though children always have a higher z-index than their parents.

If you want to give the effect of a watermark, you can:

  1. Make the image the background of the div and place an image watermark inside it.

  2. Position another div within .artist-container absolutely, with the same dimensions as that of the image and with a higher z-index of the image, with the watermark as the background.

Upvotes: 3

Mikey G
Mikey G

Reputation: 3491

make the image as the background-image of the div and the watermark as the img

Upvotes: 0

Related Questions