Making background images clickable links

HTML & CSS
1

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

2

Hello, basically just make the div, h1, and a all the same height and width. So give the a display block and the height. Here is how I did it long ago. { visibility: inherit; } The Linked Image Swap!

3

Thank you very much for your reply, Eric. I must be missing something obvious. I’m still pretty new to CSS but I’m eager to learn everything I can.

Here’s what I added to my CSS:

#header > h1 a {
	display: block;
	height: 200px;
}

That seemed logical enough to me. But it didn’t work. When I used Webkit Inspector on the <a> element it looks like it’s adding the height to the bottom instead of to the top.

4

Your welcome. Probably need to take the padding off the h1. Or give the a the same padding.

Edit: is the h1 one line? If so, just give it line height equal to the height of the header to vertically center it and iksnay the padding.

5

Eric, you’re brilliant. I took the padding off the h1 and put it on the a and it’s perfect. Thank you so much!

6

Well not completely brilliant. I said or give the a the same padding. Duhh! That wouldn’t work. I’m glad it helped you to your solution though. I admit I do have a hard time picturing others code. I’m more at home with my own. Who isn’t I guess.