Linking Specific part of Image which is in Background

I have开发者_StackOverflow社区 a Background Image [through CSS], I want to Link a Specific Part of that Image like it says "Home" and I want to point it to my site's home.

I think the Image Mapping works only with normal images and I can't find a way to do it with Background Image [Actually I haven't tried.]

So Can anyone please tell me how to do that?

Thanks :)

1. Use a 1px transparent png over the background image
2. Set the size of the png to the size of the background or link you want to make
3. Now you can either just link that transparent png, or map it

If you're having trouble fitting the png in the space, float it or use position:relative to get the overlaying transparent image to where you need it.

Lets say we have

HTML

<div>
<a href="#home"></a>
</div>

CSS

div
{
width: 100px; /*the same width of the background image*/
height: 100px; /*the same height of the background image*/
background-image: url("#image");
position: relative;
}

div>a
{
position: absolute;
top: 10px /*the distance of the "home" part of the image from the top*/
left: 20px /*the distance of the "home" part of the image from left*/
width: 10px /*the width of the "home" part of the image*/
height: 5px /*the height of the "home" part of the image*/
display: block;
}

div>a:hover
{
outline: 1px solid black;
}