How do i make only the image part of an element clickable?

Question

When i use

background: url("button.png") top/contain no-repeat;

It will fit the image correctly. But when i make the div clickable, it will receive clicks from all over the div and not only the part with the image on it, can it be fixed somehow?

Is there a reason you're using the image as background and don't just put an `img` tag inside your div? — Siguza, May 13 '15 at 07:02
OMG @MörreNoseshine you are right! so simple! and all i have to do now is to add width="100%" so it will fit itself to the screen while rotating it! Thanks! :) — Sahkan, May 13 '15 at 07:18
@MörreNoseshine i thought that you are misunderstand the question and just wanna warn you. of course the simpliest solution is the perfect one. — semirturgay, May 13 '15 at 08:20
@semirturgay Warn me from what? It was obvious that OP doesn't give nearly enough information to help solve his *actual problem*. My answer was 90% meant to point that out by deliberately solving exactly and *only* the problem he asked about. The question really is too broad since there are many options and possibilities depending on what the guy actually wants to do, context. — Mörre, May 13 '15 at 08:22
possible duplicate of [How to make background images clickable (javascript or css)](http://stackoverflow.com/questions/8811311/how-to-make-background-images-clickable-javascript-or-css) — Cwt, May 13 '15 at 08:26

score 0 · Answer 1 · answered May 13 '15 at 07:04

Make sure you have set your div to:

display: inline-block;

Besides from that, you don't want to have a padding in the div. Instead only set height and width to the exact dimensions for the button. If you want to align the button you can use margin.

div.myButton {
    background: url("button.png") top/contain no-repeat;
    display:inline-block;
    padding:0px;
    height:30px; /* For example 30px */
    width:80px; /* By 80px*/
    margin: 10px 0px;
}

How do i make only the image part of an element clickable?

1 Answers1