CSS Trick: Turning a background image into a clickable link
One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this:
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:
Aaron is the man behind the curtain here at Xavisys. He gets things done and really knows his way around the code.
I like it! I hadn’t realised you could use this for h1 tags. Many thanks.
why not delete the text between the attribute tags instead of using text-indent?
Because you want the text there for the search engines to pick up.
Actually you should delete the text and just use the title attribute.
It’s hard to tell for sure, but it seems like search engines prefer text in the link to the title tag. That’s why I put the text there.
I’m trying to use your trick with a logo on the left and some text in a paragraph tag on the right side of my header but my paragraph is being pushed down by the block containing the link. How can I get the paragraph to appear on the same line as the bg image?
You’ll need to set it to display:block as well as float:left. Here’s some code:
<a style="background-image: url(/wp-content/uploads/2009/11/email_logo.gif); display: block; height: 58px; text-indent: -9999px; width: 200px; float:left; margin:0 1em 1em 0;" title="Professional WordPress Development" href="http://xavisys.com" rel="nofollow">Xavisys Website Development</a><p>Here is some test text. ... Here is some test text.</p>
Xavisys Website Development
Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text.
it seems you need to write the html too, only the css doesn’t work – i mean this is a trick, and not css code if i got it right?
the issue is, i know up to now only how to add css in my blog, but not how to meddle into the html layers yet. so, no html, no trick?
point is, at some special few places like free-text widgets you can add an image&href by html, some others you can’t. there, i just put my image as bdg no-repeat via css, but so i lose the possibility to link with href..
That’s really clever.
10 points and thanks for solving my problem.
Aaron thaks. I used your solution. Take care.
This is what I do. I hope it works for others.
html
Xavisys Website Development
css
#xavisys-logo {
background:url(/wp-content/uploads/2009/11/email_logo.gif);
display:block;
height:58px;
width:200px;}
#xavisys span {display:none;}
#xavisys-logo span {display:none;}sorry, don’t know if this will post, but
html: a link, title, div with id “xavisys-logo”, span, text, close span, close div, close a link.
html
close
Hi
I notice that when you click it in FF you don’t get any dotted borders to appear on the final one. I am following your steps, but due to the text indent FF is showing me in my website a dotted border around my link that extend far left. How did you remove this dotted border?
Thanks!
Nevermind, I loaded your style sheet and found it
a:focus, a:hover, a:active {
outline: none
}
I’m using wordpress and I’m very confused about where to put the HTML.
Do I put the HTML code in index.php or in header.php?
You explain all the other steps really well but you left me very confused on the html part.
I’ve looked up other tutorials that describe how to do this but they all seem to assume that you know what file to edit for the html.
So I’m probably missing something really obvious but I would really appreciate a explanation on where to put the html code.
Thank you!
Different themes will have this in different places. Assuming you want to use this trick in the header of your site, a good place to start looking is header.php but there’s no guarantee. However, this particular trick can be used anywhere you want a clickable background image, which is why I don’t say where to use it.
Fantastic trick! It worked like a charm. Thanks for posting this bit of info, Aaron.
Jamie
fiftyfootpixel.com
The way I understand it, that’s gonna get you banned from search engines from hiding the text on an image.
Thanks for the clever tip, solved a problem I was having!
Hi, thanks for the great tips, I’m really close to getting this trick but I’m missing the last step. I have the text link where I want it but I can’t seem to create the block I need to cover the entire image and I can’t seem to make the text disappear. Here is what I’ve input.
Get An Online Tutoring Session From A Masters Or Phd Student For 3.95
/*—:[ Trial Button Css Trick, input by Liam Martin to make a background image clickable]:—*/
#trial_button { background-image: url(images/special_icon.png); display: block; height: 166px; text-indent: -9999px; width: 166px; }
I’m also rocking thesis 1.6 and have a customized skin. There must be something stupid I’m doing, if you can point it out to me I’d be plenty thankful
thank you, this was very useful
Hi
your trick helped me a lot.
but i am stuk at one point
I have 16X16 px favicons to be ligned up and i am using a box of height 25X25. but i want the link to remain on 16X 16 only.
If you change the width and height to something other than the image size, you should also add the following CSS rules:
background-repeat:no-repeat;
background-position:center center;
The background-position can be used to place the image in a different place within the box, and the background-repeat is used to tell it not to tile the image.
I duno
http://validator.w3.org/check?uri=http%3A%2F%2Fxavisys.com%2Fcss-trick-turning-a-background-image-into-a-clickable-link%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
The method itself validates. However, there are definitely error on this page in the comment section. Nothing I’ll take the time to fix, but you’re right…this page doesn’t validate.
Wow! Great work! You solved a bit of an issue for me, and it’s so simple. You are a genuis. Thanks!
Al
I have just been trying this and stubled along here looking for an explanation to my problem.
I am trying to create a similar effect only with multiple images in an unordered list. Can anybody help?
Aaron,
Thanks for the tip, it worked well and my preview in Dreamweaver shows up great. But, (and I’m a novice) I placed the logo/link image in my header, which has a blue background.
When I update the site, the logo disappears. is the color conflicting with the image? Can’t I have both?
I’m designing a site for a class project (http://rwany.sibaja.net)
All is working without any tricks!
HTML:
CSS
#xavisys-logo {
background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
display:block;
height:58px;
width:200px;
}
#xavisys-logo a {
display:block;
height:58px;
width:200px;
}
HTML:
CSS
#xavisys-logo {
background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
display:block;
height:58px;
width:200px;
}
#xavisys-logo a {
display:block;
height:58px;
width:200px;
}
Great trick, just used it and working perfectly many thanks!
I have tried following your trick and some of the tips in the comments, and most of it works nicely.
But I cant seem to place the logo in the middle of the header and make the outline around the link disappear.
Any ideas what I’ve done wrong?
#grillhytte_logo {
background-image: url(grillhytte_logo.png);
background-repeat: no-repeat;
background-position: center center;
display:block;
height:130px;
width:500px;
text-indent:-9999px;
}
#grillhytte_logo a{
display:block;
height:130px;
width:500px;
outline: none
}
Try adding margin:auto; to the “#grillhytte_logo” CSS rules, and border:none; to the “#grillhytte_logo a” CSS rules
It is not necessary to create any text-ident and hide text and any other tricks. All you have to write block:display in a {} section