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    lt body gt       lt form name  myform  class  wrapper  gt           lt input type  text  name  q  onkeyup  showUser      gt           lt input type  button  name  button  value  Search  onclick  showUser    class  button   gt            lt p gt                lt div id  txtHint  gt  lt  div gt            lt  p gt       lt  form gt   lt  body gt    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

User · Answer

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

User · Answer

If this is a submit button  use  lt input type  image  src             gt    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

User · Answer

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

User · Answer

You need to type it without the word image   background  url   image btn png   no-repeat   Tested both ways and this one works   Example    lt html gt       lt head gt           lt style type  text css  gt               button                  background  url  image btn png  no-repeat                  cursor pointer                  border  none                         lt  style gt       lt  head gt       lt body gt           lt input type  button  name  button  value  Search  onclick  showUser    class  button   gt           lt input type  image  name  button  value  Search  onclick  showUser    class  button   gt           lt input type  submit  name  button  value  Search  onclick  showUser    class  button   gt       lt  body gt   lt  html gt

User · Answer

button      background-image url   image btn png        background-repeat no-repeat

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

Examples related to html

Examples related to css

Examples related to button