How can I fill a submit button with an image? - html

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" />

Answer 3

add this line in css file:
display:block;

Answer 4

You need to wrap a span to submit button and style it.
DEMO http://jsfiddle.net/H5dmd/2/
HTML
<form method="post">
<span class="icon">
<input name="submit" type="submit" value=" "/>
</span>
</form>
CSS
input[type=submit]{
background:transparent;
width:20px;
height:20px;
border:none;
padding:none;
cursor:pointer;
}
.icon{
float:left;
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%;
}

Answer 5

Add an id to the button, Updating the image:
document.body.onclick=function(e){
debugger;
var bid=document.getElementById('bid');
bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}
js fiddle here.

Answer 6

You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.
Example:
<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />
Live test case.
Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".

Answer 7

I see multiple options here :
Change saving
Save your image to 20x20, and whoops, problem gone.
Use CSS3
CSS3 introduces a new feature that is backgroud-size
Just put that in your CSS :
background-size: 20px 20px;
But it won't be compatible with old browsers.
Use JavaScript [Bad style]
HTML
<form method="POST" action="test.php" name="myform">
<a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>