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

Seriously, I would *never* use Java for something like this. Java is not JavaScript. — Antony, Jun 05 '13 at 08:23
Best solution IMO is to store the image with a size of 20px/20px; this way the browser does not need to it when rendering the page. — Stijn Geukens, Jun 05 '13 at 08:24
Which browser? because for me it works like you expect it to. It shrinks — Hanky Panky, Jun 05 '13 at 08:25
I meant javacript, sorry... The problem is that I cant change the Image :/ — Nelson Monteiro, Jun 05 '13 at 08:25
background-size: cover; could do the trick because it fills the whole button. BUT. would it shrink? Never tested that. — Kees Sonnema, Jun 05 '13 at 08:26
I tried your code in a JS fiddle and it looks fine to me: http://jsfiddle.net/quHwh/ (I added the green border to see the input better). It's possible you have conflicting CSS somewhere. — Dai, Jun 05 '13 at 08:26
http://stackoverflow.com/questions/7935456/input-type-image-submit-form-value — Rito, Jun 05 '13 at 08:31

score 3 · Answer 1 · answered Jun 05 '13 at 08:26

3

try this : -

background-size:20px 20px;

answered Jun 05 '13 at 08:26

Anurag-Sharma

4,278
5
27
42

Please note that background-size isn't supported in IE 8 and earlier – Henrik Karlsson Jun 05 '13 at 08:31
For any problem for the IE 8 and later versions see this page http://css-tricks.com/forums/discussion/19221/background-size-and-ie8/p1 – Anurag-Sharma Jun 05 '13 at 08:39

score 3 · Answer 2 · answered Jun 05 '13 at 08:37

3

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

answered Jun 05 '13 at 08:37

Jukka K. Korpela

195,524
37
270
390

WhyMe · Answer 3 · 2013-06-05T08:34:34.780

1

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.

edited Jun 05 '13 at 08:34

answered Jun 05 '13 at 08:28

WhyMe

535
2
13

Click on the body (next to the button) to change the image. – WhyMe Jun 05 '13 at 08:34

score 1 · Answer 4 · answered Jun 05 '13 at 08:30

1

add this line in css file:

display:block;

answered Jun 05 '13 at 08:30

mayaa

173
1
2
10

score 1 · Answer 5 · answered Jun 05 '13 at 08:31

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%;        
}

score 1 · Answer 6 · answered Jun 05 '13 at 08:37

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

score 0 · Answer 7 · answered Jun 05 '13 at 08:39

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>

How can I fill a submit button with an image?

7 Answers7

HTML

CSS

Change saving

Use CSS3

Use JavaScript [Bad style]