Transparent background image at the top of the page

Question

I have a background image that I would like to display on top of my web page, or better explain, present the background image as a watermark. I would like to place this as a filter on my web page. So that each page has this "watermark"

I managed to do this by setting the image to transparent. But the problem is that if I did not set the z-index to say “-10000,” then the image is considered “on top” of everything else and therefore my links are unattractive.

Any suggestions on how to achieve what I'm trying to do without making the links invisible?

Answer 1

You must do this using an overlay event pointer

#overlay { pointer-events: none; } 

There is a good publication - http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/