Tutorial – Clickable background images with CSS

April 9th, 2008 by debbie campbell

I wrote a blog post about this a while back but now I’m adding a full tutorial so you can actually see an example as it’s created. Learn how to turn any CSS background image into a clickable image map.

Try my tute and let me know what you think:

Clickable image maps example

I’ll be adding more CSS tutorials in the coming weeks, so check back every so often.

Share and Enjoy:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Posted in CSS, CSS Tutorials, Web Design | 7 Comments »

7 Responses

1. gina Says:
   November 20th, 2008 at 12:46 pm

   Hey this is great, but does it work on sites that are centered on the page since it’s moving around?

   thanks Debbie!

2. gina Says:
   November 20th, 2008 at 12:52 pm

   never mind. It works! Thank you!

3. markei Says:
   January 30th, 2009 at 12:28 am

   What if you want the entire background image area clickable through css, how do you position text links on top of the (clickable) area. Will they work?

4. debbie campbell Says:
   January 30th, 2009 at 12:54 am

   Markei –

   Check this tutorial: http://haacked.com/archive/2006/01/13/ClickableBackgroundImagesViaCSS.aspx

   You can use that technique to make the entire background image clickable (so it would be ‘.box1 a’ that you’re using) and then use specific elements like ‘#box-link’ to create the text links on top.

   You might have to use z-index to make the text links be on top of the background link, not sure about that at this hour…

5. Kimberly Says:
   January 30th, 2009 at 5:39 pm

   Thanks for this great tutorial!

6. Oscar Says:
   March 4th, 2009 at 8:09 am

   Debbie,
   Thanks for that.

   That fixed an issue for me (well almost…).
   Internal links work, but wanted to link to a subdomain, is there a trick for that?

   Thanks again!

7. Oscar Says:
   March 4th, 2009 at 8:15 am

   Oops! My bad…
   Left in a ‘ that caused an issue while I got a challenge with my eyes and the text size

   Cheers!

Leave a Comment