4

I have a background image that I would like to display on top of my webpage, or better explained, imagine the background image as a watermark. I would like to place this as a filter over my webpage. So that every page has this "watermark"

I've managed to do this by setting the image transparent. But the problem is that unless i set z-index to lets say -10000, then the image is considered to be "on top" of everything else and thus my links are unclickable.

Any suggestions to how to achieve what I'm trying to do without making links unclickable?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user829237
  • 1,719
  • 8
  • 37
  • 61
  • Interesting question, but I don't think there is a way to do this. An image is either on top, obscuring everything, or underneath, being obscured by everything else. – Pekka Jan 11 '12 at 17:13
  • 1
    possible duplicate of [Click through a DIV to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – Joseph Marikle Jan 11 '12 at 17:15

1 Answers1

1

You should be able to do this using pointer-events on the overlay

#overlay {
  pointer-events: none;
}

There's a good post on it here - http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
  • Thanks for your input! But unfortunatly i need IE7 support amongst other things so i cant use this yet... :( – user829237 Jan 11 '12 at 17:26
  • It's always bloody IE - http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – SpaceBeers Jan 11 '12 at 17:31