Making a clickable background image

If you want to create a clickable area right over the logo background image, here is what you do.

You can’t just copy the #header div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can’t place block-level elements like div inside anchor tags.

You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (see below) if you have to support old browsers.   Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1.

<div id=”header”>
<a href=”http://mysite.com”><img src=”pixel.gif” id=”home-link” alt=”” /></a>

</div>

———— CSS ——–

#home-link {
/* this is to create the link area over the bg image logo */
position: absolute;
width: 230px;    /* width of the logo */
height: 70px;   /* height of the logo */
top: 40px; left: 440px; /* top-left corner of logo */
border: 0;
float: left;
}

#header {
width: 970px;
height:114px;
background:url(images/logo_head.gif) no-repeat left;
background-position: 110px 50px;
}