Background image for button in IE6 html

Question

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?

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

1

you could use <input type='image'> It defines an image as the submit button.

answered May 07 '13 at 04:00

Þaw

2,047
4
22
39

Are we able to detect what browser we are using in html? Is it that I should put: if (IE6) {} else if (IE9) {}. Is it like this? – Coolguy May 07 '13 at 04:03
you could refer from here http://stackoverflow.com/questions/13785587/if-ie-not-working – Þaw May 07 '13 at 05:57

score 0 · Answer 2 · edited May 23 '17 at 12:03

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 :)

Background image for button in IE6 html

2 Answers2