Hyperlinked Background Image

Wondering how to make a style sheet background image clickable.

[arhkah]

I'm wondering how to make the logo, appearing in the upper right-hand corner of our humane society's website, a hyperlink to the home page. I'm not sure how to do this because the logo itself is a background image. I noticed that there are previous posts on this subject, but nothing I found seemed to answer the following:

The background image is as follows on the style sheet:

.header {height: 75px; text-align: right; padding-right: 10px; font-size: 90%; background-image: url(images/logoimage.jpg)

Then, on the web pages, .header is as follows:

<td colspan="2" class="header"><!--webbot bot="Include" U-Include="includes/globaltop.htm" TAG="BODY" startspan -->

I've tried everything I can think of with no luck, so if anyone has the answer, I'd be VERY appreciative.

Thank you.

[WhiteWebServices]

One way to do this is to put the image in the html (and then remove the ugly default border on linked images in the stylesheet):

HTML: <a href="index.html"><img src="logoimage.jpg" alt="" /></a>
CSS: a img {border: none;}

If for some reason you want to keep the logo as a background image (e.g. for easy updating), then an empty anchor with the logo as a background image would accomplish this, as long as you give the anchor the right dimensions and set its display property to "block":

HTML: <a href="index.html" class="linkedlogo"></a>
CSS: a.linkedlogo {display: block; height: 160px; width: 160px; background: url(logoimage.jpg);}

Either way, you need to insert an anchor into the html.

[arhkah]

Wow! This might just solve the problem. Thank you! I used your example for keeping the background image and it seems to work perfectly, with one exception due to a mistake on my part... the logo is in the upper LEFT-HAND corner of the page, not the right. So what I end up with is a hyperlinked area on the opposite side of the page from what I want. So sorry for the mix-up. I'm hoping you might be able to tell me how to reverse the clickable area.

This seems like such a nice, clean solution to my problem. The only change I made to your example is to set the height at 50px instead of 160. 160px caused the height of the header to expand and the background image, which is 750 pixels wide x 75 pixels high, to repeat. For some reason, changing the height to 75px still caused it to repeat. In your opinion, is there a better way to solve the repeat problem?

Thank you again for your help with this!

[topr8]

background-repeat: no-repeat

[WhiteWebServices]

Glad I could help.

If you set the dimensions of the anchor to the precise dimensions of your logo, then there won't be any extra space for the image to repeat in.

Alternatively (and slightly less efficiently), you can specify in the CSS that the image isn't to repeat:

CSS: a.linkedlogo {display: block; height: 75px; width: 750px; background: url(logoimage.jpg) left top no-repeat;}

For the positioning on the page, I'd have to see more of your code (StickMail me if need be).