Here’s the relevant HTML:
<div id="header">
<h1><a href="index.html">Site Name</a></h1>
</div>
In my CSS I have a background image in the header div and I’ve styled the h1 like so:
#header {
height: 200px;
background: #1A4CAD url(images/dcplogo_left.png) no-repeat top center;
}
#header > h1 {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 155px 45px 0 63px;
text-shadow: hsl(0,1%,16%) 1px 1px, hsl(0,1%,16%) 2px 2px, hsl(0,1%,16%) 3px 3px, hsl(0,1%,16%) 4px 4px;
}
Obviously my h1 link is clickable but how would I go about making my background image clickable? I’ve found some ways of doing it by using nothing but a background image in the header (in other words, having the h1 there throws off everything) and creating an <a> element and setting it’s left margin to some huge negative number or setting it to display: none. But what if I already have an h1 and just want to make the background image clickable and not mess up my layout?
The reason I want to do this is because I know it’s best practice to have your logo always link back to your home page. But is it all right just to have the logo text (the h1) link back to the home page and not worry about making the actual logo image a link?
Thanks in advance for any help,
Paul