Turn header img into url whilst placing img with css???

Hello,

I placed my header-logo inside <div id="header"></div> using

#header {
width:100%;
height:94px;
background:url(images/cabecera.jpg) top center no-repeat;	
}

Code (markup):

Now I would like to turn that header into a link back to my home page.

I tried doing that with <a href="http://www.escuelacaninamaya.com/index.html"><div id="header"></div></a> and that works.

But, it´s not valid html so here I am, stuck.

Is there a way of doing this without having to do it by placing the image using html, can it be done using css to place the image and html to turn the header into a link?

Greetings.

 

<div id="header"><a href="/"><span style="width:100%; height:94px;"></span></a></div>
- Might work but best way if you dont want to use your logo image would be to create a blank gif and lay it over your logo image and use that.

 

<div id="Masthead"><a href="index.html" title=""></a></div>

Use the CSS Below in a stylesheet:

#Masthead {
position:relative;
background:url("images/cabecera.jpg") no-repeat;
height:94px;
}

/* index page link within #masthead */

#Masthead a {
position:absolute;
left:48px;
width:237px; /*Define the width of the link box*/
top:59px;
height:53px; /*Define the height of the link box*/
}

#Masthead a span {
display:none; /*If the header image says anything add in a span tag for SEO but hide it.*/
}

 

Just a quick reply but will the link tag work with nothing inside it?

Wouldn't it need at least a:

&nbsp; <- space

 

Thanks,

This works.

But, now I have a problem with the css for normal links:

a:hover,
a:active {
background-color:#FFF;
}

Code (markup):

gives a white logo on hover.

 

Yes because you have stated a background color on the hover, if you place color:#FFFFFF; that will change the text color and not the background.

 

Where do I place this?

 

I think he means in place of background-color:#F etc put color:#fffff That will make the text white. Or use different # if you didn't want white.

 

What you want is an accessible navigation image replacement technique.

Paul O'Brien has one (he's Paul O'B from SitePoint) at http://www.pmob.co.uk/temp/navimagereplace.htm