<button> background image

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.