is it possible to have a image (.png) over a button and still be able to click the button

Question

Is it possible to have a image (.png) over a button and still be able to click that button

Here you have some answers. [1-Answer](http://stackoverflow.com/questions/8488005/how-to-put-a-jpg-or-png-image-into-a-button-in-html) [2-Answer](http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button) ;-) — SvOzMaS, Feb 23 '16 at 09:13
You should set for image `pointer-events: none;`. Just be aware of [support](http://caniuse.com/#feat=pointer-events) — A. Wolff, Feb 23 '16 at 09:14
as you are using png image, you can use it as a background and easily you can position the button as per requirement showed in screenshot or you an use absolute position for the button too possible.. like this https://jsfiddle.net/3qxjbrL9/3/ — G.L.P, Feb 23 '16 at 09:38

score 2 · Answer 1 · answered Feb 23 '16 at 09:11

2

Using z-index, you can indeed:

button.btn-class {
    z-index: 999;
}

EDIT - You'll obviously need to ensure the image z-index is lower that 999 as above!

Good reference: https://css-tricks.com/almanac/properties/z/z-index/

answered Feb 23 '16 at 09:11

David Wilkinson

5,060
1
18
32

But then the button would be over the image – A. Wolff Feb 23 '16 at 09:13
The image should be on top, not the button. – Radu Dragan Feb 23 '16 at 09:18
@A.Wolff Apologies I mis-read the question - I'll delete my answer! – David Wilkinson Feb 23 '16 at 09:20
@RaduDragan as above, I mis-read the question, I'll delete my answer. – David Wilkinson Feb 23 '16 at 09:20

score 1 · Answer 2 · answered Feb 23 '16 at 09:14

1

Yes use higher z-index value for button than image. For more info refer this link

img{z-index:9;}

button{z-index:99;}

answered Feb 23 '16 at 09:14

G.L.P

7,119
5
25
41

1

But that doesn't set the image over the button then. EDIT: seeing screenshot, if elements get always being displayed that way, it could be a solution indeed – A. Wolff Feb 23 '16 at 09:15
The image should be on top, not the button. – Radu Dragan Feb 23 '16 at 09:19
post your code as a demo, so we can help better – G.L.P Feb 23 '16 at 09:20
http://fotodex.ro/constructor/test/ – Radu Dragan Feb 23 '16 at 09:57
no it`s not http://www.fotodex.ro/constructor/test/ – Radu Dragan Feb 23 '16 at 10:06
still, url not working in any of my browsers.. – G.L.P Feb 23 '16 at 10:15
i have no idear way is used http://www.isup.me/ and it`s telling me "it`s up", thanks – Radu Dragan Feb 23 '16 at 11:06

score 1 · Answer 3 · answered Feb 23 '16 at 09:16

1

z-index property of css only works on positioned elements (position:absolute, position:relative, or position:fixed)

use this:

.imgclass {
    position: relative; //or whatever you want i.e fixed
    z-index: -1;
}

.buttonclass {
    position: relative;
    z-index: 999;
}

answered Feb 23 '16 at 09:16

Ejaz47

145
1
12

The image should be on top, not the button. – Radu Dragan Feb 23 '16 at 09:20
1

Ok, as your query you can not do this.... – Ejaz47 Feb 23 '16 at 09:34
you will not be able to click/hover the button because html elements are like stacks.... – Ejaz47 Feb 23 '16 at 09:35
you can see here way z-index this is not an answer http://fotodex.ro/constructor/test/ – Radu Dragan Feb 23 '16 at 09:59
[fotodex.ro/constructor/test/](http://fotodex.ro/constructor/test/) This web page is not available – Ejaz47 Feb 23 '16 at 10:07

score 1 · Accepted Answer · answered Feb 23 '16 at 10:33

As stated in the comments...without adjusting the z-index of the image (which is apparently not an option) you are restricted to disabling pointer events on the image.

img {
  pointer-events:none;
}

Support is all modern browsers but only IE11

Poor Demo:

body {
  margin: 0;
  padding: 0;
}
div {
  height: 400px;
  display: flex;
  flex-direction: column;
}
button {
  align-self: flex-start;
}
img {
  opacity: 0.5;
  position: relative;
  top: -1em;
  margin-left: 2em;
  border: 1px solid red;
  pointer-events: none;
}

<div>
  <button>Click Me</button>
  <img src="http://lorempixel.com/g/400/200/" alt="" />
</div>

is it possible to have a image (.png) over a button and still be able to click the button

4 Answers4