Create a Cross image watermark in css [closed]

Answer 1

I assume this is what you are trying to achieve

Set the Div1 css position attribute as relative. Create a child div with position absolute. Insert the watermark image or text inside the child div. Put all your content inside the parent div. Position the watermark div above all your contents (use z-index:1).

Hope this helps

Answer 2

You could add a wrapper to the images and use an after selector.

SEE DEMO

CSS

.watermark {
    position: relative;
}
.watermark:after {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

HTML

<div class="watermark">
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img>
</div>
<div>
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img>
</div>