place transparent image over background image

Sounds simple, but struggling to get this working.

I though开发者_高级运维t 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 :)

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>

Firstly, background images don't affect the context menu. The "Open Image", "Save Image..." and so on options only appear in the context menu when you right click img elements.

Secondly, your transparent image is the background of the outer div, so it's behind everything inside the outer div including the inner div and its background image.