While working on a design for a client’s site the other day, I had the need to make a background image a clickable link. Their logo was being used as a background image in the site’s header, and we wanted it to act as a link to the home page - like any good website should.
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):
<div id="header"></div>
#header {
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:
<div id="header"><a href="http://mysite.com" ><span>MySite.com</span></a></div>
#header a {
background: #fff url(images/header.png) no-repeat;
display: block;
height: 101px;
width: 800px;
}
#header a span {
visibility: hidden;
}
And there you have it - a quick CSS trick that turns your background images into clickable links.
This article was originally posted on my personal blog - brandoncwood.com.
Download Design
January 12th, 2007 at 3:42 pm
Handy tidbit of information, thanks for sharing it.
February 5th, 2007 at 1:48 am
Nice! Exactly what I needed, since the way I was doing it before was to use a block element inside the a tag… not sure what I was thinking. But this works great!
February 18th, 2007 at 6:53 am
It doesn’t work for me! I’ve done it exactly and it does not work. UGH!
February 18th, 2007 at 7:03 am
AHA. Positioning values cannot mimick the parent div, but must be set to left, top: 0px to match up. My hyperlinked div was sitting off somewhere else on the page hidden behind other content. May want to mention that positioning is very important!
May 4th, 2007 at 8:02 am
I was tackling this and temporarily gave up just the other morning.. a huge thanks for sharing this tip :).
May 4th, 2007 at 8:19 am
Using the was acting up a bit on Firefox.. An alternative is to use an and then, instead of setting visibility, set a text-indent with a large negative margin instead.
May 16th, 2007 at 10:05 am
Hey… THIS WORKED OUT GREAT…
However.. one problem..
How would you Suggest applying an alt image tag to a clickable background image?
Is that even possible?
Your thoughts?
Thanks
June 2nd, 2007 at 5:05 am
Nice tip - thanks for sharing it.
July 24th, 2007 at 10:52 am
You can add an image alt attribute with this technique - which I use regularly:
Where blank.gif is a 1px by 1px transparent gif.
Here’s one for you:
http://www.media3000.co.uk/justmedia.ie/catalog/images/pixel_trans.gif
January 10th, 2008 at 2:12 pm
Hi, does this technique not work if you are using absolute positioning? I have it working on a div that is positioned relative, but it won’t work for some reason on a div that is positioned as an absolute.
January 21st, 2008 at 12:44 pm
Right on! Works like a charm
February 10th, 2008 at 4:17 pm
Thanks for sharing this! I’ve been trying to find a solution for ages
February 11th, 2008 at 7:03 am
Can’t believe I landed on this! This issue has been a nagging thorn in my side for months — thank you!!
April 20th, 2008 at 6:55 pm
I searched and searched for how to do this. Thanks!
June 25th, 2008 at 2:00 pm
Thanks for the help.
July 20th, 2008 at 3:31 pm
This is awesome hint mate! That’s exactly what I wanted !
Cheers !!!
August 22nd, 2008 at 4:14 am
Thank you. Very useful tip. It works!!
August 28th, 2008 at 10:05 pm
Thanks for this tip.
This could also be done using an image map.
August 29th, 2008 at 11:31 am
I tried and it worked……Thanks for a wonderful trick…..
@DanStephenson could you please tell us how to do this using image maps?
August 30th, 2008 at 1:51 pm
Perfect! Just what we needed for our myspace band page! Thank you!