Reputation: 2285
The below coding is how I add a background image on a button on my webpage. It can work on IE9, Firefox and Chrome:
<td>
<input id="btn1" style="width: 25px; height: 25px; background-image: url('images/refresh.png'); background-repeat: no-repeat;" type="button" onclick="Get()"/>
</td>
But when I use IE6, it does not show the image. Just an empty button.
Do you guys know how do we put the image on a button that will shown on IE9 as well as IE6?
Upvotes: 0
Views: 147
Reputation: 229
You can use <input type="image" src="">
. It works fine with IE and others browsers.
This is the W3C Recommendation:
"The image button state represents either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form. The element is a button, specifically a submit button."
Or you can use this hack (I mean, it's preferable using the input image.):
<div class="button"><input type="submit" name="" value=""></div>
And the CSS file:
div.button input {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
Source of the last recommendation is: Stack Overflow :)
Upvotes: 0
Reputation: 2057
you could use <input type='image'>
It defines an image as the submit button.
Upvotes: 1