z-index troubles

[Rodders]

Hi guys, I'm designing a web page for a friend's band. They've requested that the homepage has an image which then uses an image map so the navigation links are kind of hidden.

They also want the name of the band to appear behind the image almost as a background.

I've tried using z-index to get this effect but I'm not having much luck. Any suggestions where I'm going wrong?

http://luminosity.greater-peterborough.com/redcellghost/index.html

http://luminosity.greater-peterborough.com/redcellghost/rcg.css


Thanks in advance

[nkaisare]

You'll need a png image with alpha transparency to show the text in the background. If you use z-index and place the text over the image, those parts of the image will not be clickable anymore. If you use higher z-index for the image, the text behind the image will not be displayed. Gifs allow either transparent or opaque images... png is the format that allows semi-transparent images,

[cyberchimp]

You'll need to be careful using PNGs though, as browser-support is patchy and unreliable. You can find out the current state of play here: http://www.libpng.org/pub/png/pngapbr.html.

[Nevermore]

You could include the text as part of the image, and draw it transparent. Then you could sitll save as a GIF. Or you could make the text a mask so that it vanishes slightly and looks transparent, and make the text a hyperlink.

[Rodders]

I think to make it simple I will just make the text part of the image. It works for what I need.

Thanks for your answers folks. I now need to centre the image in the browser window. Shouldn't be a problem, even for a CSS novice like me!