How to make a Image in external CSS clickable

Hey guys, on my website, I had some help setting up all of my CSS so that my page would load faster. The one thing that I can't figure out though is that I have an image (my website logo) that's in the CSS and not in the actual HTML and I want to make it clickable so that when people click on it, they head back to my homepage, anyone know the answer?

Thanks,
Tim

 

Inside the anchor (link) place a span so that it appears next to the text that SHOULD be there as a backup for when images are not present, like so:

<a href="#"><span></span>Link Text</a>

Code (markup):

Now, in your stylesheet, define the link's properties. I'm going to use an anchor without an ID or class, but you'll have to apply one of the two to your HTML and then target that instead.

The first thing you have to do is set the link's display to block then set the font-size to 1em along with the line height to the height of the image (to get around an IE bug). So if you have an image that's 200px wide by 150px tall, your line height would be 150px. So once you've declared the display status and font size, set the height and line height so they're the same. Then set the link's oveflow to hidden, position to relative and declare the width of the image.

a {
	display: block;
	font-size: 1em;
	height: 150px;
	line-height: 150px;		/* sets line-height to equal height for Internet Explorer to squash a bug cold without hacking */
	overflow: hidden;
	position: relative;
	width: 200px;
}

Code (markup):

That'll take care of the link. But what about the span? This is where you declare the background image. Using the background short-hand property, you'll declare the path to the image, its position, and tell it not to repeat. Then you'll set its display to block as well. Of course, you also have to set the height and width of the span as well now that it's display is set to block (otherwise it'll collapse into itself), but you'll also want to set its position to absolute as well, making the top and left positions zero each.

a span {
	background: url("/images/link-image.gif") no-repeat 0 0;
	display: block;
	height: 150px;
	position: absolute;
		top: 0;
		left: 0;
	width: 200px;
}

Code (markup):

You know what's great about this code? Let's say you have a rollover image that's 200px by 300px high (with the first half of the image being the rollover state and the bottom half being the default state). Just add this code to the stylesheet and you'll have an instant rollover!

a:hover {
	visibility: visible;		/* needed for Internet Explorer to work */
}

a span:hover {
	background-position: 0 -150px;
}

Code (markup):