Making Header Image Clickable Link
By Jeremy Clark
tips | 
css, header, image, tips | 1,448 views 
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.
<div id="header"><a href="http://www.your-link-to-your-home" id="headerlink"></a></div>
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.
#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;
}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.
| (3 votes, average: 3.67 out of 5)
Loading ...
PRand
Nov 20th 2008 @ 3:43 pmwell, 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…
Jeremy Clark
Nov 20th 2008 @ 3:57 pmI’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.
PRand
Nov 20th 2008 @ 3:45 pmme again. i forgot to check ” notify me … “
PRand
Nov 21st 2008 @ 3:50 pmhi 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!
marilu
Mar 16th 2009 @ 11:51 pmI 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
marilu
Mar 17th 2009 @ 12:46 amnevermind, 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
Alejandro
Dec 18th 2009 @ 6:51 pmHey – 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.