Creating a cross watermark in css

Question

I need to create a cross image that will display as on the image. Div 1 does not have a fixed height, it will change several times.
Then how can I create a cross watermark inside Div 1?

I tried Like

.cross01 { width:520px; height:100%; background:url(../images/cross01.png) repeat-y; position:absolute; top:0px; z-index:1000; } 

Answer 1

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

WATCH 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> 

Answer 2

I guess this is what you are trying to achieve

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

Hope this helps