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.

Related posts:

1. CSS Tip: Image Rollover effect

|  (8 votes, average: 4.50 out of 5)

 Loading ...