Here is your answer. Simple, and quite effective. I tested it on my shop because I was looking for the same thing you were.
The only thing I changed was to put the closing link tag "</a>" just before the closing div "</div>" tag of the logowrapper section instead of right after the closing span tag as shown.
I found this answer at http://webdevnews.net/2007/01/css-trick-turning-a-background-image-into-a-clickable-link/
It’s simple to turn a regular image into a clickable link, but in some situations, it’s just not possible to use a regular image – so how do you turn a background image into a clickable link? First let’s take a look at my original markup (I’ve removed unnecessary elements for sake of simplicity):
(This is found in /template_default/common/tpl_header.php)(The dots just symbolize stuff between the div tags)
<div id="logowrapper">.................</div>
(The following is found in /YOUR_TEMPLATE/css/stylesheet.css)(THis may not be exactly what you have, but you get the idea)
#logowrapper {
background: #fff url(images/header.png) no-repeat;
height: 101px;
width: 800px;
}
So, how can we make our background image a clickable link? It turns out it can be done with a clever CSS trick. All we have to do is add the link markup between our header div tags, and apply the above markup to the link instead. All we have to add to the CSS is display: block to force the link to fill the entire space.
To handle browsers that don’t support CSS (those things are still around?), we should also add a span containing link text that we will hide with our CSS. Here’s what we end up with:
(This is found in /template_default/common/tpl_header.php)(The dots just symbolize stuff between the div tags)
<div id="logowrapper">
<a href="http://mysite.com"><span>MySite.com</span></a>.......</div>
(The following is found in /YOUR_TEMPLATE/css/stylesheet.css)(THis may not be exactly what you have, but you get the idea)
#logowrapper a {
background: #fff url(images/header.png) no-repeat;
display: block;
height: 101px;
width: 800px;
}
#logowrapper a span {
visibility: hidden;
}
And there you have it – a quick CSS trick that turns your background images into clickable links.
