Changing proportions of an image of a "Submit" button

[Baby_Bean]

Hi everyone,
My code contains a form and an input of “submit” type.
I want my submit button to be an image so I wrote the next html/css code:

.button 
{
background: url("pics/edit.gif") no-repeat scroll 0 0 transparent;
background-size: auto;
}
<input type = 'submit' value='' class = 'button'>

Unfortunately the image turns out to be too big to fit in line with other elements.
I’d like to change the image’s size proportionately (the entire image ! Not only a part of it !)
to be of 20px width 20px height.
Can anyone show me the way to do it eithe in HTML or CSS ?
Thanks

[ErnieAlex]

Just use a button instead. A button tag is similar to a div tag. Therefore, anything inside it becomes part of the button. Loosely like this:
> <button type='submit' name="someButtonName"> whatever you want <img src='pics/edit.gif'>some more text, another image whatever...</button>

Works just like a standard submit input button does, but lets you put anything in it. I use it often for images with captions to let a user select between two things. Used it one in a tic-tac-toe example for someone learning.

[Baby_Bean]

whatever you want

Thank you very much !

[ErnieAlex]

You are very welcome! Hope it helps! Let us know if it does. Remember a button needs to be inside a form to be posted or you can post it (submit it) using a simple javascript on the button. Really depends on your needs and uses of the button.

[Baby_Bean]

Thanks again.
Your assistance helped me solve the problem I presented but it seems a new problem emerges.
I think the cell’s borders disappear.
Il have to delve deeper to see if I need more help and then I’ll let you know.
Very kind of you !