How can I fill out the submit button with the image?

Question

so I have a submit button with this code:

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

a in 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 (with h: 40px and w: 40px) is not compressed to fit the 20px button ... Do you guys have any solution for this? (I rather do not use javascript if possible)

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

Answer 1

try the following: -

 background-size:20px 20px; 

Answer 2

Instead, use the submit button and compress the element to the required size 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 the identifier 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 4

add this line to the css file:

 display:block; 

Answer 5

You need to wrap the scroll button to submit 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 6

You can simply use the input image of the type, it exists for this purpose for sure: a submit button showing the image. As a bonus, you will also get the coordinates that the user clicked on.

Example:

 <input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" /> 

Live test .

only one drawback: on the server side, the code for processing the form, you should check if "mysubmit.x" and / or "mysubmit.y" are not empty, to know if you got something sent, which is less intuitive than just mysubmit check.

Answer 7

I see several options here:

Change save

Save your image to 20x20, and screams, the problem has disappeared.

Use CSS3

CSS3 introduces new backgroud size feature

Just put this in your CSS:

 background-size: 20px 20px; 

But it will not be compatible with older 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>