Making Header Image Clickable Link

CSSSometimes 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.

About Jeremy Clark

Small town IT worker with interests in all things technological and technical. Biggest interests are in web development especially the WordPress publishing platform and the community supporting it. Currently developing and maintain the free WordPress theme Techozoic. I'm also always available for hire.
This entry was posted in tips and tagged , , , . Bookmark the permalink.

16 Responses to "Making Header Image Clickable Link"

Leave a reply

Comments will be sent to the moderation queue.