How to add background image for input type="button"?

Question

i've been trying to change the background image of the input button through css, but it doesn't work.

search.html:

<body>
    <form name="myform" class="wrapper">
        <input type="text" name="q" onkeyup="showUser()" />
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
         <p>
             <div id="txtHint"></div>
         </p>
    </form>
</body>

search.css:

.button {
    background-image: url ('/image/btn.png') no-repeat;
    cursor:pointer;
}

what could be wrong?

even inline-ing the css didn't seem to work.

when i tried that, it displayed no results at all. anyhow, thanks to jonathan it;s working now. — input, Apr 29 '10 at 18:35

score 64 · Accepted Answer · edited Aug 24 '16 at 21:31

64

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

edited Aug 24 '16 at 21:31

Diogo Perdigão

7
5

answered Apr 29 '10 at 16:26

Jonathan Czitkovics

1,642
11
11

funny. it doesn't work for me. the firebug console only shows this: `.button { cursor:pointer; } ` – input Apr 29 '10 at 16:38
Did you try to copy and paste the whats in the code box into an html file to see if that works for you? Also try using quotes around the path or remove the first `/`. – Jonathan Czitkovics Apr 29 '10 at 16:41
k, it works now [the type="button" one that is]! thanks. i wonder what was wrong with the external css. the only thing now is that it shows the image as the background of the button with the borders. how can i just show the image, without it looking like a button? – input Apr 29 '10 at 16:46
1

The code for that is just like any old div or table tag. `border: none;` – Jonathan Czitkovics Apr 29 '10 at 16:50
how to set the size of the image and how to have variable image? – Kiran K Telukunta Sep 01 '15 at 14:13

score 16 · Answer 2 · answered Apr 29 '10 at 16:53

16

Just to add to the answers, I think the specific reason in this case, in addition to the misplaced no-repeat, is the space between url and (:

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */

answered Apr 29 '10 at 16:53

Pekka

442,112
142
972
1,088

Actually I just tried it and your right! It does not work with the space but that's not the only problem with your code. – Jonathan Czitkovics Apr 29 '10 at 16:54
1

thanks for pointing out. i was googling for solutions on this, and one of the answers was with `no-repeat`, hence i tried it. – input Apr 29 '10 at 18:35
1

url(/buttonsimages/redheart.jpg)// THIS DONT WORK FOR ME: STARTING URL WITH SLASH url(buttonsimages/redheart.jpg)// THIS WORK FOR ME: STARTING URL WITH TEXT – jarimos Aug 03 '13 at 15:49

score 10 · Answer 3 · answered Apr 29 '10 at 16:35

background-image takes an url as a value. Use either

background-image: url ('/image/btn.png');

or

background: url ('/image/btn.png') no-repeat;

which is a shorthand for

background-image: url ('/image/btn.png');
background-repeat: no-repeat;

Also, you might want to look at the button HTML element for fancy submit buttons.

score 4 · Answer 4 · edited May 23 '17 at 12:18

4

If this is a submit button, use <input type="image" src="..." ... />.

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html

If you want to specify the image with CSS, you'll have to use type="submit".

edited May 23 '17 at 12:18

Community

1
1

answered Apr 29 '10 at 16:21

Greg K

10,770
10
45
62

Type `image` and `submit` both act as submit so you can catch the submit event via the `form` tag attribute `onSubmit`. http://msdn.microsoft.com/en-us/library/ms536972(VS.85).aspx – Greg K Apr 29 '10 at 16:28
If you look at my code that I tested and is working, `input type="button"` and `input type="image"` can be styled using css. He just used the wrong property. – Jonathan Czitkovics Apr 29 '10 at 16:31
the problem is, when i use `type="submit"` the form reloads but displays no results; but when i use `type="button"`, the results are displayed. the data is being generated via ajax on the click of the button, and the form doesn't have any handler called 'onsubmit'. – input Apr 29 '10 at 16:40
If you're loading via AJAX, then you'd move the call to the `onSubmit` event, otherwise you're calling (I presume) via `onClick` and the form is being submitted as well. – Greg K Apr 30 '10 at 09:28

score 0 · Answer 5 · edited May 03 '23 at 16:41

0

.button{
    background-image:url('/image/btn.png');
    background-repeat:no-repeat;
}

edited May 03 '23 at 16:41

InSync

4,851
4
8
30

answered Jul 01 '20 at 00:02

Dennis Sam

1
2

1

Welcome to Stack Overflow. When adding an answer to a ten year old question with an accepted answer it is very important to point out what new aspect of the question your answer addresses. Code only answers can almost always be improved by adding some explanation of how and why they work. – Jason Aller Jul 01 '20 at 01:24

SpiderMan · Answer 6 · 2023-05-11T10:52:18.013

0

.button-class {
  background: url(images/tom1.png) no-repeat; /* local source or link */
  cursor: pointer; /* if you want different cursor */
  border: none;
}

OR

#button-id {
  background: url(images/img.png) no-repeat;
  cursor: pointer;
  border: none;
}

edited May 11 '23 at 10:52

answered May 03 '23 at 10:14

SpiderMan

15
5

How to add background image for input type="button"?

6 Answers6

Linked