Making background-image clickable

Question

I would like to create a link out of the following so that the image is clickable.

What would you do to get the background-image clickable?

HTML: (Displays an Image which I would like clickable)

<div class="some_image">
</div>

CSS:

.some_image{
    width: 200px;
    height:100px; 
    background-image: url(../images/image.png);
}

I would like it compatible with older browsers. So this might not work for for the moment? — gpwr, Aug 20 '15 at 14:20
If you want just the image area clickable, you must wrap the image with a link tag, or, if entire div can be clickable, you can add a click event to the div. — Ricardo Pontual, Aug 20 '15 at 14:22

score 1 · Accepted Answer · edited May 23 '17 at 12:06

You can't make a background image clickable with HTML alone. It's a property of an element and not an element itself. Simply wrap the div in an anchor. This is permissible in HTML5 spec.

More info

Of course, you could simply style the anchor:

.some_image {
    display: block;
    width: 200px;
    height:100px; 
    background-image: url(../images/image.png);
}

<a class="some_image" href=""></a>

score 0 · Answer 2 · answered Aug 20 '15 at 14:24

You can't do this traditionally however you may achieve the effect with hacky techniques:

#heatSpot { 
    position: absolute;
    left: 20px; // over area of bg image
    top: 10px; // over area of bg image
    cursor: pointer;
}

then just fire the link or whatever your trying to do onClick with either wrapping above element in <a> tag -- or using jQuery / JavaScript.

Making background-image clickable

2 Answers2