How to make a picture act like a button

Question

I trying to make a button with an image as a background like this:

HTML

<input type="image" value="submit" src="images/map.png" id="location" />

and This is the css content (in a seperate css file)

#location{
position: fixed;
right: 10px;
bottom: 20px;
width: 80px;
height: 80px;
z-index: 2;
background-image: url('../images/map.png');
}

and this is the call of my css file in the HTML file:

<link rel="stylesheet" href="css/style.css" />

The problem is that I got only a kind of an empty square with no picture inside...

What is the problem? Thanks in advance.

Why are you using the same image as the background and the button image? — Barmar, Jul 04 '14 at 23:05
The solution is probably this: http://stackoverflow.com/a/1193338/1656568 — achedeuzot, Jul 04 '14 at 23:23
It sounds like you aren't getting the correct path to your file for the image?... — BuddhistBeast, Jul 05 '14 at 03:55

score 0 · Answer 1 · edited Jul 04 '14 at 23:17

0

Don't use input type image.

Just use input[type="submit"] or input[type="button"]

HTML

<input type="button" value="submit" id="location" />

CSS

#location{
     position: fixed;
     text-indent: -9999px;
     right: 10px;
     bottom: 20px;
     width: 80px;
     height: 80px;
     z-index: 2;
     background-color: url('./image/map.png';
     border: none;
}

edited Jul 04 '14 at 23:17

Oracle

328
1
11

answered Jul 04 '14 at 23:04

Danny van Holten

932
5
22

it's always not working(this is the code): http://pastebin.com/2iFYgDt4 Just a grey square with no picture as a background! – user1444393 Jul 05 '14 at 10:56

score 0 · Answer 2 · answered Jul 04 '14 at 23:32

I prefer define element and set a background on it and also define a event handler for OnClick for this span as a button

<span style="background-image: url(../images/map.png)" onclick="clickFunction"> </span>
<script>
    function clickFunction() {
           // click event handler
    }
</script>

score 0 · Answer 3 · answered Jul 04 '14 at 23:40

0

Not sure what the issue with using a background-image on a button. Here's a simple fiddle: http://jsfiddle.net/YG7sX/.

HTML:

<button id = "location"></button>

CSS:

#location{
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    background: url(http://placehold.it/80x80) no-repeat;
    z-index: 2;
}

answered Jul 04 '14 at 23:40

DRD

5,557
14
14

it's always not working(this is the code): http://pastebin.com/2iFYgDt4 Just a grey square with no picture as a background! – user1444393 Jul 05 '14 at 10:55
Here's another fiddle that uses `` and the image is setting nicely on it: http://jsfiddle.net/FdBLy/. Are you sure that the path to the image is correct? – DRD Jul 05 '14 at 20:37

How to make a picture act like a button

3 Answers3