Tutorial – Clickable background images with CSS
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:
I’ll be adding more CSS tutorials in the coming weeks, so check back every so often.
Posted in CSS, CSS Tutorials, Web Design |
7 Comments »




















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!
November 20th, 2008 at 12:52 pm
never mind. It works! Thank you!
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?
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…
January 30th, 2009 at 5:39 pm
Thanks for this great tutorial!
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!
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!