Sometimes a text header link just doesn’t cut it. Making a image a clickable header link is very simple. You can see the result above, the area around the name in the image is a link back to the home page.
Here is the basic layout of the code.
[xml light=”true”]<div id="header"><a href="http://www.your-link-to-your-home" id="headerlink"></a></div>[/xml]
Notice that the actual link doesn’t contain any text so when it’s render by the browser there would be nothing to display and the link wouldn’t show up. That is fixed in the CSS.
[css light=”true”]
#header{
background:url(images/header.jpg) no-repeat bottom left;
height:100px
width:100%;
}
#headerlink{
display:block;
width:100px;
height:100px;
margin:20px 0 0 20px;
}[/css]
This will make a 100px X 100px square link that is 20px from the top of the header and 20px from the left. As for most styling it will require some trial and error to get it positioned just right.
By PRand November 20, 2008 - 3:43 pm
well, after months!! of trying to get it right your code made it possible! thanks so much. one thing. in FF browser when i click on header image a dotted black border appears around image. does not happen in safari. i don’t really care about IE for the moment as my theme is a wreck on it from get – go. that’s another project…
By Jeremy Clark November 20, 2008 - 3:57 pm
I’d never really noticed it until you said something. After doing a little research it seems to be an accessibility feature built-in Firefox for the handicapped that can’t use a mouse, it allows them to see which link is highlighted. But if you want to just disable it on your top header link then you add this to your .headerlink class in your stylesheet
outline-style: none;I would really recommend only disabling it on your header to leave your site as accessible as possible.
By PRand November 20, 2008 - 3:45 pm
me again. i forgot to check ” notify me … “
By PRand November 21, 2008 - 3:50 pm
hi jeremy, thank you for the quick response. i forgot i made mention of this outline border and lucky for me i found you in my spam box. sorry about that! ; – )
did what you said in header link only. thanks! ron
btw – another thing i just noticed going through this exercise is that my pages are jumping around on some header links. i tried the theme out of the box and it jumps too. it’s really bugging me now!
By marilu March 16, 2009 - 11:51 pm
I too had problems for months trying to get the right code inserted to make my header also a link. everything works great with this except when I hover over my header a big blue box (as big as the set height and width parameters) when I put display: none instead of display: block, it causes it not to work anymore. any ideas?
thanks
By marilu March 17, 2009 - 12:46 am
nevermind, I see that it is a simple change to my a hover code, sorry, it only just occurred to me. But still solid information that finally worked. Thanks
By Alejandro December 18, 2009 - 6:51 pm
Hey – whats up. Thanks for the info. I’ve been digging around for info, but there is so much out there. Google lead me here – good for you i guess! Keep up the good work. I will be popping back over in a couple of days to see if there is updated posts.
By Sophie December 8, 2010 - 6:47 am
Hi! Very Nice tip! How can you add more links in the header? Appreciate the reply! – Sophie S, norway
By Alicia February 7, 2011 - 3:05 pm
simplest explanation (that works) I’ve seen so far! Thank you so much 🙂
By Tanya February 10, 2011 - 3:05 pm
Hello,
will just like to ask, if i want an header image thats clickable with all my different links, and i think i can only use css in livejournal, will you be able to help me pls?
i will like an header image like odorikoya.livejournal ‘s 🙂
By tiong May 1, 2011 - 6:49 am
Another way is to use javascript “onclick” parameter
By Seonaid July 20, 2011 - 8:03 am
Brilliant, thank you.
By Anthony October 6, 2011 - 2:53 am
Great help. I was able to make my headerimage linkable. That’s one thing that went right for me today in the realm of creating websites. Been trying to add a slideshow, but no luck for two days now. By the way, that reminds me. I want to let everyone know that Steve Jobs passed away today. What a great loss.
Anyway, thank you.
By Becs November 26, 2011 - 6:50 pm
This is great thank you. Is possible to add a 2nd and 3rd link within the header. I have tried creating a new style and can get the link to work, but positioning it doesn’t seem to work with the margins (i.e will only appear below the 1st header link)
By Aaron March 30, 2013 - 2:26 am
Thanks a lot man, best solution and tutorial !
By qpqpqp April 20, 2013 - 4:37 am
It’s been nearly five years since you made this post, but it’s still helping people! In particular, it just helped ME figure out how to make my masthead header image be a clickable link leading back to my blog’s home page. I looked at dozens of other purported solutions to this problem, but yours is the only one that actually worked!
My only suggestion to make the post even better is to explain somewhere the the first half of the code — the “…” part — needs to be pasted into the main index template, and also the “single post” php file; and only then paste in the second part of the code into the css stylesheet.
Aside from this one bit of missing info, your post is the best explanation anywhere on the Web about how to make header images clickable!