How can I fill a submit button with an image?

Question

so I have a submit button with this code:

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

an in the CSS I have:

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this?? (I rather not use javascript if possible)

EDIT: Currently working. I just delete history, cash and it works... ty

Answer 1

try this : -

background-size:20px 20px;

Answer 2

Use an image submit button instead, and shrink the element to the desired dimensions using CSS.

<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />