Making a clickable area from a background image in CSS

December 11th, 2007 by debbie campbell

NOTE: This post has been replaced by a full-fledged tutorial - you can find that here. Please go there and don’t try what you see here; Wordpress mangles my code snippets no matter how I try to get them displayed. The new tute is much better, I promise.

———————

This is a neat little trick that will allow you to create multiple clickable areas over any background image. This is easier, to me, than making image maps used to be.

Create a transparent box, absolutely positioned, that fits right over the top of the section of background image you want to make clickable. It’s easier to give this box a background-color while you’re getting it into position. The CSS looks like this:

/* This is the logo link clickable area */
#logo-zone {
position: absolute;
top: 18px;
left: 11px;
height: 21px;
width: 240px;
background-color: transparent;
}

Obviously you’ll change the ‘top’ and ‘left’ positions to line up with the top left corner of your background image’s clickable section, and adjust the ‘height’ and ‘width’ to fit.

Within the HTML, add an href link with the ID of your clickable box (Wordpress won’t let me put this next link in here without screwing it up - remove the x from xhref):

<a id=”logo-zone” xhref=”yourlink.com” >

Pretty simple, and you can create multiple clickable areas wherever you need them on your page.

Posted in CSS, Web Design |

12 Responses

1. Tod Says:
   January 5th, 2008 at 9:21 pm

   I don’t understand how it works. Could you be more idiot-proof with your explanations please?

   Thanks. Tod.

2. debbie campbell Says:
   January 5th, 2008 at 9:59 pm

   When you use a background image on a div or other element in a cascading style sheet, the image is ‘glued’ to that element - it isn’t included as an image in your HTML file, so you can’t make it clickable by putting an anchor tag around it.

   So instead you have to create a transparent box that you can position right over the top of the div with your background image, over the part that you want people to be able to click. You make the box in your CSS stylesheet, then give it an absolute position right on top of the div. Does that make sense?

   If not, I’ll put together an example.

3. Rob Healey Says:
   January 15th, 2008 at 1:30 am

   Hi, that’s exactly what I want to do - OK I have the transparent box positioned, but pasting in your code doesn’t work - ie the pointer doesn’t turn to a hand and nothing clickable.

   I first tried this -   but that didn’t work either.

   Any ideas why pasting your html didn’t work?

   Rob

4. Rob Healey Says:
   January 15th, 2008 at 1:32 am

   Sorry the html after “I first tried this” has not come out - I’ll leave out the brackets - it was ‘a href=”http://www.robhealey.com.au/Contact”> 

5. debbie campbell Says:
   January 15th, 2008 at 10:18 am

   Rob - I think it was that I had used the wrong ID on the link - I’m trying to get this formatted but you can read it at least…

   Change the ID to match the one in the CSS code snippet above the link snippet.

6. David Says:
   April 9th, 2008 at 9:20 am

   I’m using a background image in wordpress and positioning the transparent box is throwing all my other page elements out. I’m pasting the code a id=”logo-zone” href=”free-gift”. Any suggestions?

7. debbie campbell Says:
   April 9th, 2008 at 9:25 am

   David, can you paste a link to your page so I can see? Did you give it position: absolute so it’s not included in the normal flow of the page?

8. debbie campbell Says:
   April 9th, 2008 at 10:29 am

   Try this instead - http://www.position-relative.com/css_bg_image.php

9. David Says:
   April 9th, 2008 at 6:07 pm

   That did the trick Debbie… your code above did not have /a> but the page you referred me to made it all clear. Thanks a lot

10. debbie campbell Says:
    April 9th, 2008 at 6:21 pm

    Thanks David… I’d been meaning to do this for a while now and your post finally made me. I’ll also put a note in this post about checking out the tutorial instead.

11. Mike Spear Says:
    April 26th, 2008 at 6:45 pm

    This does not work in Firefox….

12. debbie campbell Says:
    April 26th, 2008 at 6:56 pm

    Mike - you’re probably right. Did you try the tutorial that replaced this post?

    http://www.position-relative.com/tutorials/tute1_css_bg_image.php

Leave a Comment