Linking header image to home page

[Taurus]

I want link header image back to the home page (index.php), so when user click on header image this bring back to the homepage.
Problem is that header image is called from a CSS file, and there's no hyperlink: example (http://ppukltd.com/)

I find some tips, Creating_clickable_background_images_using_CSS (http://docs.joomla.org/Creating_clickable_background_images_using_CSS), but dont know how to implement this for this template and what is correct way to do it.

Here is header CSS:

#header {
float: left;
width: 802px;
height: 127px;
background: url(../images/header.jpg) no-repeat;
}

Here is part of index.php that call header:

<div id="header">
&nbsp;
</div>

[Major Payne]

This is ONE way:

span#header { display: block; width: 169px; height: 51px; padding: 2px; margin: 0 auto; background-image: url(header_image.jpg); border: 2px solid #070; text-align: center;"}

<div><a href="http://YourSite.com/" title="Mouseover Description"><span id="header">&nbsp;</span></a></div>

Play with it until it fits your needs. Got another one if necessary.

[Taurus]

what mean width: 169px; height: 51px; in your css code? Is this cliackable area?

span#header {

display: block;
width: 169px;
height: 51px;
padding: 2px;
margin: 0 auto;
background-image: url(header_image.jpg);
border: 2px solid #070;
text-align: center;

}

[Major Payne]

Yes. That is the image size I had originally used in my example code. Forgot to change it to generic width: XXpx; height: YYpx; which is going to be the size of your header.

[Taurus]

Your version works for me, though there is some problems: i can set clickable area for whole header only(since i need specify the width/heigh of header in css), for some reason code creates border around header, which I was unable to remove even after I set border:0px; also, it colored header area in gray color in IE, if Firefox - not(i used image on transparent background). It seems there is no needs for url in div:

<div><a href="/" title="Nav: Home"><span id="header">&nbsp;</span>/a></div>

I currently use version with transparent GIF image in anchor tags, it works ok.


<div id="header">
<a href="/"><img src="/images/transparent.gif" id="home-link" alt="Nav: Home" /></a>
</div>

#header {
position: relative;
width: 800px;
height: 127px;
background: url(../images/header.png) no-repeat;
}

#home-link {
position: absolute;
width: 400px;
height: 127px;
top: 0; left: 0;
border: 0;
float: left;
}

I tried also vers. as per Example 2 (http://docs.joomla.org/Creating_clickable_background_images_using_CSS), but it not worked for me.

[Taurus]

update: I figured out what the problem is, adjusted one line and now method 2 works for me Example 2 (http://docs.joomla.org/Creating_clickable_background_images_using_CSS)
html
<div id="header">
<a href="/" id="home-link" title="back home"></a>
</div>
css

#header {
position: relative;
width: 800px;
height: 127px;
background: url(../images/header.png) no-repeat;
}

#home-link {
position: absolute;
display: inline-block;
width: 400px;
height: 127px;
top: 0; left: 0;
border: 0;
float: left;
}

it not worked because #home-link CSS had "visibility: hidden;" property which prevented code to work. I dont know what is the purpose of this property. Anyone have an idea? Also, I removed 'Home' from anchor tags, so anchors is empty now<a href=..></a> (since I dont want show this text on logo). Is the empty anchor elements valid html syntax?