Make the image inside a div appear behind its div background

Question

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

Solution 1

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.

Solution 2

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