CSS Trick: Turning a background image into a clickable link
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.
Download Design
Handy tidbit of information, thanks for sharing it.
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!
It doesn’t work for me! I’ve done it exactly and it does not work. UGH!
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!
I was tackling this and temporarily gave up just the other morning.. a huge thanks for sharing this tip :).
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.
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
Nice tip – thanks for sharing it.
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.
Right on! Works like a charm :-)
Thanks for sharing this! I’ve been trying to find a solution for ages :D
Can’t believe I landed on this! This issue has been a nagging thorn in my side for months — thank you!!
I searched and searched for how to do this. Thanks!
Thanks for the help.
This is awesome hint mate! That’s exactly what I wanted !
Cheers !!!
Thank you. Very useful tip. It works!! :)
Thanks for this tip.
This could also be done using an image map.
I tried and it worked……Thanks for a wonderful trick…..
@DanStephenson could you please tell us how to do this using image maps?
Perfect! Just what we needed for our myspace band page! Thank you!
Works perfectly, nice and simple, cheers for sharing.
Needed to get this done at the end of a hard days work and couldn’t be bothered working it out for myself.
;)
You just saved my life i dont normally post on sites like this but i had to… Thanks for the help!!!!
works great in Firefox, but does not in I.E. 6 or 7.
Doesn't seem to work for me in IE either. Fine in Firefox
For SEO purposes, I would use a heading tag instead of the <span> tag :-)
and instead of visibility:hidden, a negetive text-indent would also be helpful in my opinion since google tends to look over anything that is displayed none or visibility hidden~
coz IE sucks!
Nice tip indeed. Follow Me On Twitter
If there is some text or images in the header (could be links for switching to other language), it will be displayed after the header. Did you find a way to solve this?
Thank you for sharing this. Really helped me out. I did put the image and link in my <h1> tags with <span> for backup text. Even though the link worked, the cursor didn't change to pointer on mouse-over. So, I added { cursor:pointer; } to the <h1> tag and voila!
wrong wrong and wrong. you dont need the cursor to change if it’s done right, infact isnt the cursor declaration invalid!?
and the use of a span inside is wrong, you dont need a span if you’ve got a h1, what’s the point? it’s extra markup that isnt even needed.
Also the visability:hidden; attribute really shouldnt be used, because if it hasnt already, it soon will be literally hidden from search engines.
the solution is simple:
if you want a clickable background image you can work it like this..
all your seo keyworded description here
ok, now the the css would be something like this:
.header h1{
float: left;
width: 262px;
margin: 15px 0 0 0;
text-indent: -9999px;
height: 65px;
background: transparent url(../images/logo.jpg) no-repeat 0 0;
}
.header h1:hover{
background: transparent url(../images/logo.jpg) no-repeat 0 -65px;
}
.header h1 a{
height: 65px;
width: 262px;
display: block;
}
so here i have told the image what to be on the h1. on hover i have a little house icon appear so thats what the h1 hover is doing. works great.
i have told the h1 to position the text off the page – this way it’s still there, so we have the seo advantages.
then i have told the a link to be a blaock of a certain size and width (the same as my logo) and have also added a title tag to it so that it displays like a ALT tag does.
and what do you have? exactly what you want and the user is none the wiser. it appears just as a regular image but with all the perks, no mess and validated.
hope this helps
enjoy yourselves
Shelton
EssBe.co.uk
FootballFilms.co.uk
ahh, i didnt think it was use the html, but it did, so i will write the first bit that got changed to ‘all your seo keywords here’ again.. what i put was
all your seo keyworded description here
it changed the html so here it is again without any forward slases and brackets:
h1
a link with href and title=”return to homepage”
your ‘hidden’ seo keyworded description
a (end)
h1 (end)
Great info! Worked perfectly!
works great! thanks a lot!