button background image

Question

I have got a little problem with setting a background image for  lt button gt    Here is the html I have got on site     lt button id  rock  onClick  choose 1   gt Rock lt  button gt    And here is the CSS   button      font-size  18px     border  2px solid  AD235E     border-radius  100px     width  150px     height  150px     button  rock      background  url img rock png  no-repeat      I don t know why the button s background is still white

User · Answer

You absolutely need a button tag element? because you can use instead an input type="button" element.

Then just link this CSS:

_x000D_

  input[type="button"]{
  width:150px;
  height:150px;
  /*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150px 150px;
}

_x000D_

<input type="button"/>

_x000D_

User · Answer

To get rid of the white color you have to set the background-color to transparent   button     font-size  18px    border  2px solid  AD235E    border-radius  100px    width  150px    height  150px    background-color  transparent     like this

User · Answer

For some odd reason  the width and height of the button have been reset  You need to specify them in the ID selector as well    rock       width  150px      height  150px      background-image  url http   th07 deviantart net fs70 150 i 2013 012 c 6 rock 01 png   by alzstock-d5r84up png       background-repeat  no-repeat      Live test case

User · Answer

Astonishing that no answer addresses or mentions the actual problem here   The CSS selector button  rock says  give me an element with the id rock inside a  lt button gt  element   like this    lt button gt       lt span id  rock  gt This element is going to be affected  lt  span gt   lt  button gt    But what you wanted is a  lt button gt  element with the id rock  And the selector for that would be button rock  note the missing space between button and  rock    And as  Greg already mentioned   rock is already specific enough to target the button and could be used on its own

User · Answer

Delete  button  before   rock   button  rock       background  url img rock png  no-repeat       Worked for me in Google Chrome

User · Answer

You need to call CLASS in button   lt button class  tim  id  rock  onClick  choose 1   gt Rock lt  button gt      lt style gt   tim  font-size  18px  border  2px solid  AD235E  border-radius  100px  width  150px  height  150px  background-image  url images Sun jpg      lt  style gt

User · Answer

try this way    lt button gt        lt img height  100   src  images s png   gt   lt  button gt

User · Answer

Try changing your CSS to this   button  rock       background  url  img rock png   no-repeat         provided that the image is in that place

User · Answer

Replace     button  rock With      rock  No need for additional selector scope  You re using an id which is as specific as you can be    JsBin example  http   jsbin com idobar 1 edit

[html] <button> background image

Examples related to html

Examples related to css

Examples related to image