How to make watermark / image overlay on html page?

Question

Is it possible to somehow apply a watermark to the html page with a translucent image that still allows the user to interact on the page behind it? It is controversial and not possible without any complicated scenarios, but maybe I missed something.

Answer 1

This will work for most modern browsers:

div#watermark { position: fixed; width: 100%; height: 100%; z-index: 99999; background: url('path/to/image.png') center center no-repeat; pointer-events: none; } 

Unfortunately, IE does not recognize the pointer-events property, so you need to use a javascript backup like this if necessary. In addition, some old mobile browsers / old IE do not support position: fixed , so you need another javascript reserve to place the image in the center of the viewport.

Answer 2

Try the following:

 #watermark { background-image: url('watermark.png'); repeat: no-repeat; opacity: 50; position: relative; bottom: 0; float: left; }