5

I read this link, and unfortunately, it didn't help me: How to make background image shrink proportionally to fit button size in javascript?

I want to generate a button, whose background will be an image. I want CSS to match the image size to be as big as the button is.

This is the CSS I wrote: 

button {
    border: solid;
    background-image: url("../img/download.png");
    background-size: 100%;
}

I don't know why, but I don't see any image in the button background. Do you know how to help me?

Community
  • 1
  • 1
CrazySynthax
  • 13,662
  • 34
  • 99
  • 183

3 Answers3

4

Try background-size: cover;, if I'm understanding what you. Good luck!

Sam Chahine
  • 530
  • 1
  • 17
  • 52
0

What you can do is to use an anchor tag instead of a button, and make it act as a button. The other thing you can do it wrap the button outside a span and set the span to the same size as the button in regards.

Robin
  • 76
  • 1
  • 6
0

Well if you use background-size it will take the whole button size and work perfectly, but in your specific case I think you have some other stylesheet that overrides your button style.

Note:

Avoid using style with HTML tags in this case button it will affect all buttons style in the page. Either give it a specific id or class and use your style with it.

This may be the problem in your case, you are using the style with button and maybe there's another stylesheet that overrides it.

Demo:

This is a working snippet showing that background-siz:100%;e works perfectly :

button.customBtn {
  border: solid;
  background-image: url("http://i.imgur.com/uRBtadp.jpg");
  background-size: 100%;
}
<button class="customBtn">Click me!</button>
cнŝdk
  • 31,391
  • 7
  • 56
  • 78