Создать водяной знак креста в css

Question

Мне нужно создать крестик, который будет отображаться как на изображении. Div 1 не имеет фиксированной высоты, он будет меняться несколько раз.
Тогда как я могу создать перекрестный водяной знак внутри Div 1?

Я попытался Как

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

} 

Answer 1

Я полагаю, это то, что вы пытаетесь достичь

Установить атрибут позиции CSS Div1 как относительные. Создайте дочерний div с абсолютной позицией. Вставьте изображение водяного знака или текст внутри дочернего div. Поместите весь контент внутри родительского div. Поместите водяной знак div выше всех ваших содержимого (используйте z-index: 1).

Надеется, что это помогает

Answer 2

Вы можете добавить обертку к изображениям и использовать после выбора.

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>