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.

maryisdead · Accepted Answer · 2015-08-19T09:52:44.823

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.

score 24 · Answer 2 · answered Mar 17 '13 at 13:40

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.

score 5 · Answer 3 · answered Mar 17 '13 at 13:52

5

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>

answered Mar 17 '13 at 13:52

Tom

500
3
5
16

3

giving id and button is complicated, class can be used for other buttons also – Tom Mar 17 '13 at 18:10
Either works, but id's are generally used for one of a kind elements, since their rules are difficult to outweigh. https://css-tricks.com/specifics-on-css-specificity/ – oaklandrichie Oct 29 '18 at 20:15

score 2 · Answer 4 · answered Mar 17 '13 at 13:42

2

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

answered Mar 17 '13 at 13:42

Greg

31,180
18
65
85

Adam Brown · Answer 5 · 2013-03-17T13:47:47.473

0

Try changing your CSS to this

button #rock {
    background: url('img/rock.png') no-repeat;
}

...provided that the image is in that place

edited Mar 17 '13 at 13:47

answered Mar 17 '13 at 13:37

Adam Brown

2,812
4
28
39

I edited your answer to correct the selector. There shouldn't be a space between button and its ID. – isherwood Mar 17 '13 at 13:40
1

You don't need the button part at all. It's just a performance hindrance. – Greg Mar 17 '13 at 13:43

score 0 · Answer 6 · answered Mar 17 '13 at 13:42

0

Delete "button" before # rock:

button #rock {
    background: url(img/rock.png) no-repeat;
}

Worked for me in Google Chrome.

answered Mar 17 '13 at 13:42

İsmet Alkan

5,361
3
41
64

score 0 · Answer 7 · answered May 23 '17 at 17:50

0

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

answered May 23 '17 at 17:50

tourdefran

71
1
7

score 0 · Answer 8 · answered Jan 31 '21 at 16:51

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"/>

score -1 · Answer 9 · edited Nov 24 '16 at 09:09

-1

try this way

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

edited Nov 24 '16 at 09:09

V-rund Puro-hit

5,518
9
31
50

answered Nov 24 '16 at 08:50

Areej Qasrawi

97
4

9 Answers9

Linked