Question

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:

1. 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.

2. 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.

Answer 1

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: http://jsfiddle.net/zbZKG/

Here’s a second one that works better when you reduce the window width: http://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).