javascript - How to put a jpg or png image into a button in HTML

Question

I want a button with an image in it. I am using this:

<input type="submit" name="submit" src="images/stack.png" /> 

But it does not show the image. I want the whole button to be the image.

Answer 1

It should be

<input type="image" id="myimage" src="[...]" />

So "image" instead of "submit". It will still be a button which submits on click.

If your image is bigger than the button which is shown; let's say the image is 200x200 pixels; add this to your stylesheet:

#myimage {
    height: 200px;
    width: 200px;
}

or directly in the button tag:

<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

Note however that resizing the image like this might not yield ideal results; if e.g. your image is much smaller than you want it to be shown, you will see the single pixels; if on the other hand it is much bigger, you are wasting precious bandwidth of your users. So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets!