How can I make my an image?

Question

I have a beautiful little CSS image that needs to be a button. I've tried about 20 different methods, none of which work. I just either get a blank nothing or a border with nothing inside.

The html: http://lrroberts0122.github.com/DWS/lab6/level-2/

The image: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

The CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

I can't change it to "submit" for certain reasons, so I need to figure out how to make this work with CSS. Thank you for your help!

IMO that looks more like a banner than a button. I would not expect that to send anything. — Jan, Oct 13 '12 at 18:53

score 49 · Answer 1 · edited Mar 12 '19 at 19:39

49

Use an image submit button, as the doc says:

<input type="image"> defines an image as a submit button

<input type=image src=button.png alt="Submit feedback">

(I would not use an image suggesting snailmail when setting up an online form, but maybe there is some reason to create such associations.)

edited Mar 12 '19 at 19:39

Webwoman

10,196
12
43
87

answered Oct 13 '12 at 19:01

Jukka K. Korpela

195,524
37
270
390

4

How come nobody has upvoted this answer yet? `` is exactly what OP wants, +1. – duri Oct 13 '12 at 19:18
To be 100% this is entire code, You can set your own value as well `` – Eryk Wróbel Mar 21 '18 at 12:17
1

@ErykWróbel The `value` attr on `type="image"` elements isn't supported. [Mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) states, "`` elements do not accept value attributes." and the [W3C docs](https://www.w3.org/TR/html50/forms.html#image-button-state-%28type=image%29) state, "The element's value attribute must be omitted.". Browsers appear to treat the `value` like image _alt_ text, but you should use the `alt` attr instead and this trumps the `value` attr anyway. The `value` attr on `type="image"` elements serves no purpose. – DocRoot Nov 09 '18 at 16:02
@duri it's because `input type=image` is misleading, Jukka should have precised the doc says: `The defines an image as a submit button` – Webwoman Mar 12 '19 at 16:36
but this does not submit form onclick – Umair Ayub Feb 14 '21 at 06:54

score 33 · Accepted Answer · answered Oct 13 '12 at 18:49

33

input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

answered Oct 13 '12 at 18:49

Zoltan Toth

46,981
12
120
134

Wow thank you. I wasn't including display: block, though I swear I had at some point and it didn't work. This is working great now, thank you. :D – Lindsay Oct 13 '12 at 20:19

score 2 · Answer 3 · answered Jan 30 '17 at 06:39

2

simple and easy way to make an INPUT tag as an image

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">

answered Jan 30 '17 at 06:39

alvin

21
1

score 1 · Answer 4 · answered Oct 13 '12 at 19:14

You can override the style given by the browser to the button.

For example adding this to your css does the trick for me (on Chrome):

.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}

But really if you are not going to use the browser's css for the button, you should probably not use <input type='submit'> at all, and just insert the image (via an <img src="" /> tag or a <div> with the image as background) and attach a click listener to it.

For example:

The html:

<div class="controls">
    <img src="/yourimage.png" />
</div>

The javascript (assuming you use jQuery):

$('.controls img').click(function(){... stuff to do...});

score 1 · Answer 5 · answered Nov 25 '13 at 12:08

HTML :

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>

CSS :

.btn{
    display: inline-block;
 background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
    position: relative;
    border-radius: 5px;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

JS Fiddle : http://jsfiddle.net/AJNnZ/26/

score -1 · Answer 6 · answered Dec 03 '13 at 12:26

-1

Another way that's kind of hackish is this (using jQuery):

<div onclick="$(this).parent('form').submit();"></div>

Then you style your div any way you like.

answered Dec 03 '13 at 12:26

alexg

3,015
3
23
36

How can I make my an image?

6 Answers6

Linked