Xavisys Website Development

Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles:

<a href="http://xavisys.com" title="Professional WordPress Development" id="xavisys-logo">Xavisys Website Development</a>

That’s all the (X)HTML you’ll need to make your background image clickable. Your link should look something like this: Xavisys Website Development

So, how can we make a background image a clickable link? It turns out it can be done with a clever CSS trick. Let’s get started by adding the background image and make the link the same size as the image (so you can see the whole image). Since an anchor tag isn’t a block level element, we need to force it to display as “block” so that we can specify the size:

#xavisys-logo {
	background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
	display:block;
	height:58px;
	width:200px;
}

At this point it should look something like this: Xavisys Website Development

Now all we need to do is hide the text. This can be done using “text-indent” and indenting the text completely off the screen like this:

#xavisys-logo {
	background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
	display:block;
	height:58px;
	text-indent:-9999px;
	width:200px;
}

And the finished product looks like this: Xavisys Website Development

And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links. The best thing is, these don’t adversely affect your SEO and can even be easily used inside of header tags if needed!

Related Posts:

• Becoming a Freelance Web Developer/Designer
• New Web Development Resource Launched
• Free Template: Minimalist
• Free Template: BlueBox
• Dilbert