CODEWITHSUNDEEP
javascripthtml
Rizvan
Rizvan

Reputation: 717

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

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.

Upvotes: 19

Views: 171911

Answers (8)

MartinElvar
MartinElvar

Reputation: 5804

You can use some inline CSS like this

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

Should do the magic, also you may wanna do a border:none; to get rid of the standard borders.

Upvotes: 7

vikas agrahari
vikas agrahari

Reputation: 406

<input type= "image" id=" " onclick=" " src=" " />

it works.

Upvotes: 0

codeling
codeling

Reputation: 11369

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!

Upvotes: 17

Hammad Hassan
Hammad Hassan

Reputation: 54

<a href="#">
        <img src="p.png"></img>
    </a>

Upvotes: -1

nikc.org
nikc.org

Reputation: 16952

You can style the button using CSS or use an image-input. Additionally you might use the button element which supports inline content.

<button type="submit"><img src="/path/to/image" alt="Submit"></button>

Upvotes: 17

eas
eas

Reputation: 51

Use <button> element instead of <input type=button />

Upvotes: 5

Royi Namir
Royi Namir

Reputation: 148524

This may work for you, try it and see if it works:

<input type="image" src="/library/graphics/cecb2.gif">

Upvotes: 2

GustyWind
GustyWind

Reputation: 3036

you can also try something like this as well

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

and CSS class 

.fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

An example is given here

Upvotes: 3

Related Questions