Image-mapping on an automatically resizing background with CSS

I'm pretty new to CSS, I've pilfered a bit of code and made it work for me in the way I want, I've developed a bit of an understanding after trying so many different ways to do what I want but am a bit lost.

I want to do exactly as the title says, image-map whilst allowing for the automatic resizing I'm trying to implement. Obviously I'm trying to make my site look decent on most resolutions without com开发者_Python百科promising the design I want. The site with my code so far is below:

http://blunderphonics.0sites.net

I would have done it with the old html way of doing it but I don't want any border, which that doesn't seem to allow (as you can't image map with backgrounds).

Please help, it's driving me mad

Not sure you could do this with an image map, since you have to pass pixel-perfect coordinates to the area tags.

However, what I would suggest is several an a tag for each of those areas. Set each link to display: block and size and position them with percentages (like you do in the "bg" class).

For example, the link for that top title that spans the entire page might be styled something like this:

#home-link {
    display:block;
    width:90%;
    height:10%;
    position:absolute;
    top:2%;
    left:5%;
}

This is merely an example, and those numbers are by no means accurate. I'm just using them for demonstration purposes. What you would want to do is do some measurements on that image and figure out the dimensions and positions of those links as a percentage of the entire document. For example, if a link is 100 pixels from the top, and the image is 1000 pixels tall, then you would set the top property of that link to 10%.

Hope this helps.