<button> background image - html

Question

I have got a little problem with setting a background image for <button>.
Here is the html I have got on site:
<button id="rock" onClick="choose(1)">Rock</button>
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.

Answer 1

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 <button> element", like this:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button> 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.

Answer 2

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.

Answer 3

You need to call CLASS in button
<button class="tim" id="rock" onClick="choose(1)">Rock</button>
<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>

Answer 4

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

Answer 5

Delete "button" before # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.

Answer 6

Try changing your CSS to this
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place

Answer 7

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 */
}

Answer 8

You absolutely need a button tag element?
because you can use instead an input type="button" element.
Then just link this CSS:
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;
}
<input type="button"/>

Answer 9

try this way
<button>
<img height="100%" src="images/s.png"/>
</button>