Tutorial – Clickable background images with CSS

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.


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

    thanks Debbie!

  2. 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?

  3. 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!

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


  5. I don’t know why it doesn’t seem to work on Google Chrom/Mozilla Firefox.
    It only works on MS IE/CrazyBrowser.

    What did I do wrong? hmmmm

  6. I had a problem in IE7 where only the border itself was clickable (not the interior of the transparent box). I switched from background-color: transparent to a 1×1 transparent .gif as the background image and it worked. Who knows what I was doing wrong, but hopefully this helps someone else!

  7. The clearest and most to-the-point tutorial I’ve read (and I’ve read dozens), if you want to learn how to put a CSS image map in a header image in WordPress. Very well written. Thanks, Debbie!

Leave a Reply

Your email address will not be published. Required fields are marked *