Using Header Image as Home Link

by Shana,Thu 21st Dec, 2006, in categories: Images

Note: the ID’s for divs will vary from theme to theme.

In the main index.html file, find the section that refers to the header. Replace it with the following code:

<div id="header">
<a href="{$siteurl}" title="{bloginfo show='name'}"></a>
</div>

In the stylesheet, add (or replace existing code):

#header {
margin: 0;
padding: 0;
height: 200px;
background: url(/images/header.jpg) no-repeat;
position: relative;
}
#header a {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
}

The background url and height in the #header section, and the width and height in the #header a section will be that of your image, change as appropriate.

Ensure that there are no #header a:visited, #header a:hover links in the stylesheet, and that you don’t use #header a:link