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

Answer 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.