How to make a picture act like a button [duplicate] - html

Question

This question already has answers here:
How to change an input button image using CSS
(12 answers)
Closed 8 years ago.
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.

Answer 1

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;
}

Answer 2

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>

Answer 3

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;
}