Overlay transparent image over clickable links?

You can go for option number one, except that you don't have to clip the image.

Up vote 2 down vote favorite share g+ share fb share tw.

I'm trying to create a web page with a transparent image that appears overtop of text and clickable links. Here is the mockup that I want it to look like, and here is the current site and the repo. The overlay is the plant image.

I can think of a few ways this can be done, but I'm not sure the best way to do it. Perhaps there's another way I haven't considered too. Here is what I'm thinking about doing: Clip the plant image very carefully so that it appears as an image with a yellow background, and then the rest of the plant appears as part of the background of the internal frame.

Overlay the plant image on the text (perhaps using z-index? ), make the navigation menu a graphic as well (so it appears in front), and then use image mapping to select the links. Any other ideas would be greatly appreciated.

My solution should probably be compatible with the usual browser suspects (say, IE > 7/8). Thank you. Html css html5 css3 link|improve this question edited Jul 14 '11 at 23:18BoltClock's a Unicorn?102k14146379 asked Jul 14 '11 at 23:15CuriousYogurt15610 70% accept rate.

You can go for option number one, except that you don't have to clip the image. You can simply apply the same background image to both divs, and the browser will take care of the clipping for you. You'll have to provide exactly correct px offsets for the two backgrounds.

Here's a very rough demo: jsfiddle.net/zbZKG/ Here's a second one that works better when you reduce the window width: jsfiddle.net/zbZKG/1/ The box-shadow and the plant would interact more pleasantly if you used an rgba colour with some transparency for the shadow, something vaguely like rgba(0, 0, 0, 0.6).

Rgba does not work in IE but you can create a hack that will make it work. – Lynda Jul 15 '11 at 4:03 Good idea with the rgba. Thanks very much for the solution.

– CuriousYogurt Jul 16 '11 at 1:41.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.