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
I have two background images. The trick works in IE but not Firefox.
z-index: 1 is a white background
z-index: 10 is the image that sits on top of the white background and that I want to use as the clickable link.
Any ideas?
Thanks.
Hey guys, I tried this and I simply can’t make it work. Please check out viedusoliel.com/cms and see the ‘order now’ button on top right. That is the one I’m trying to make into the link. Please advise!
I can’t access that site. I just get “Server not found”
Thanks for this, proved very useful, allowing me to get the result I want while still using the menu built into my CMS.
I think that this idea is great but I’m a little concerned about using “invisible” or hidden text (assuming that text plotted outside of the display area is also regarded as hidden) on a site and getting banned from search engines.
Do you think that adding valid text in the ALT parameter of the HREF tag would correct this potential problem?
Otherwise, great tip, Aaron. Thanks!
The reason that I didn’t answer this is because it’s really not a question with a “right answer”. The “experts” out there tend to disagree, each having their own opinion. We *do know* that Google (and probably other search engines) don’t like you to try to display something different to them than you display to your users. However, if you were linking a regular image you’d use alt-text in the image tag. This just gives you that same ability but with a background image.
In the end, I’m not worried about it. I use it in several places and haven’t noticed any penalizations. However, if it worries you…don’t use it.
Great! This worked perfectly for me.
Okay, you’re going to have to break it all down for me. I tried again and again to follow what is in here and end up with squat. Just text that is a standard <a href rel=”nofollow”> type link. No background image comes through from the CSS page. In the words of Denzel Washington from Philadelphia, explain it to me as if I were 7, because there is way too much data missing. My CSS and HTML work find except for this, but I want the popup to be a GIF animation that will take people to the site if clicked (kind of like what you see on the YOU MAY BE A WINNER banners.
I’m not sure you can set an animated gif as a background image. I’ve never tried (and probably never will).
So…any idea how the banners on sites that are links are done then? Or would those just be popups that are sized to fit around the anchor image on a standard web page with the popup sized to fit around the image?
tried this. worksk great in FF but not IE6
I definitely don’t worry about IE6 anymore. For me (across multiple sites) IE6 sits at about .6% (yes, just over one-half of one percent). Your mileage will vary, but I’m guessing it’s a small percentage for you too. I’m sure this could be tweaked to work on IE6, but I won’t take the time to do it.
And what about netscape 4.0? Have you probed in this?
Forget about IE6. It is a last century!
at the http://www.gojurmala.com you can see clickable link without hidden text. all can work without tricks
That’s not the same thing. In your case there is no text at all in the link, so the search engines have nothing to use.
<a href=’www.google.com’ rel=”nofollow”></a> and you’re done, no css needed
Make sure u don’t have any styling on the links themselves.
adding a link like that will do absolutely nothing without some CSS. CSS is the only way to add a background image, not to mention you need to set the size of the link so that it covers the whole background image.
Hey Aaron. What about my question? I haven’t been able to find an answer yet.
Cheers,
Mick
Thanks so much, this is exactly what I needed!
Im building a website to run also in iPhone and i want to center the image only in the iPhone. How i do that?
HTML:
MobileSyncBrowser
CSS:
/*HEADER*/
#header{
-webkit-user-select:none;
display: block;
width: 100%; height: 43px;
position: relative;
background-color:#b9f73e;}
#header a{
text-indent:-1000em;
display: block;
height: 43px;
position: absolute;}
#header #home{
background: url(../img/msblogo.gif);
width: 250px;}
The HTML code:
MobileSyncBrowser </a
“
The HTML code:
a href=”http://www.test.msjpr.org” name=”home” id=”home” MobileSyncBrowser /a
Amazing!!! it worked for me on my blogger template
Thanks for this, it’s a great tip. I’m currently re-designing my portfolio and it worked great on it.
HELP!
My css page looks like this:
#name {
width:670px;
height:130px;
text-align:left;
float:left;
font-size:1.9em;
background-image:url(images/header/careersblogheader.jpg);
display:block;
text-indent:-9999px;
}
#name h1 {
margin:10px 14px 0 0;
display:none;
}
#name a {
text-decoration:none;
}
#name a:hover {
text-decoration:underline;
}
And the php file looks like this:
<div id=”header”>
<div id=”name”><h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1></div>
And still my background image isn’t linked. What am I doing wrong? Waaaaah!
Two things:
1) You sound kind of whiney. I have a 6 year old that does enough of that
2) If you want it to work, follow the directions in this article. Your HTML and CSS look nothing like what I have here.
I’m trying to edit an existing blog template (handgloves, actually), so I was copying in everything they had since it was a bit more complicated than basic html. Since I’m not css or php proficient (obviously) I was trying to delete as little of their code as possible. I inserted the “display:block” and designated the height/width and created the “text-indent:9999px” like you suggested.
I apologize if trying to make a joke in frustration came across whiney. Perhaps trying to do this while keeping my three kids entertained has that effect. Then again, maybe I’m entirely out of my league.
I used this to put picture into background with css but the picture does not appear. Then I put the background code into HTML and the picture appears. I put the background picute into top center and I want to move the link also into this position but do not know how. Please what css rule should be applied?
Please, how to move a clickable link into center?
how do you resolve it when the class has children classes.
Thanks so much for the helpful post.
thanks for info, but I like Video Avatar (geovid.com)
good info
thanks for the info, I was looking for something like this =D
Seems super hacky, but it works. aaand i really needed it. Thank a bunch!
Hi Aaron,
Many thanks for the tip and the code. Works very well and has solved a problem for me.
Regards,
Ray
Thank you very much!
Not exactly what I was looking for, but gave the desired result!
I have no idea what I’m doing wrong… I came to this page because everything I had tried failed. I’ve coded everything exactly like it does here, even made some modifications, and nothing works. Not in IE, not in Firefox or Chrome, nothing. Here’s my code:
HTML:
Home
CSS:
#1a {
width:75px;
height:25px;
background:url(menu4.png);
display:block;
}
#1a a {
width:75px;
height:25px;
display:block;
background:url(menu4.png);
}
I tried giving the anchor tag an id, as in the tutorial, but that didn’t work. My guess is that anchor tags can’t have ids…? But changing it to the code above didn’t work either. I don’t get it.
sorry.. the HTML code didn’t come through.
“Home“
ok…. still didn’t come through.
Homei give up. lets try it this way
div id=”1a”
a href=”#”
Home
/a
/div>