How to watermark/overlay image on an html page?

Question

Is it possible to somehow watermark an html page with a semi-transparent image that still lets through user interaction on the page behind it? Contradictory, and doesn't seem possible without some complicated scripting, but maybe I'm missing 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 doesn't recognize the pointer-events property, so you need to use a javascript fallback like this one if needed. Also, some older mobile browsers/old IE don't support position: fixed, so that'll also require another javascript fallback to position the image in the center of the viewport.