Question

Sounds simple, but struggling to get this working.

I thought it would be easy as.. but I am missing something.

Ok I have a div which loads a background image.
Surrounding this div is another div, which has a background image which is transparent.

The idea being to display the bg image, but overlay a transparent image over the top of it.

Theres no point me posting images, so here is some code.

html:

<div class="transparent">
                                <div class="solid">&nbsp;</div>
                            </div>

css:

.solid {
background-image: url('../images/solidimage.jpg');
background-repeat: no-repeat;
width: 637px;
height: 306px;
z-index:1;
}
.transparent {
background-image: url('../images/clearimagewithwatermark.png');
background-repeat: no-repeat;
width: 637px;
height: 306px;
z-index:1000;
}

The idea is that if a user right clicks the image to view background image , they get to see transaprent image that has watermark on it. Its not really for security, I just want to do it 🙂

Answer 1

You should do it the other way around, the inner div lies on top of the outer div, so it would be something like…

<div class="solid">
  <div class="transparent">&nbsp;</div>
</div>