button's background image doesn't shrink

Question

I try shrinking button's background image like How to make background image shrink proportionally to fit button size in javascript?.

But it doesn't work:

<button id="inc-fps-btn"
        class="ui button"
        style="height:20px;
               width:20px;
               background-size: 100%;
               background-size: 20px auto;">
    <img src="res/img/inc-btn-30.png">
</button>

where inc-btn-30.png is a 30 * 30 image.

I don't see what went wrong.

apply width, height to the image then ... it's not about background here — Temani Afif, Jul 22 '18 at 09:21

score 1 · Accepted Answer · answered Jul 22 '18 at 09:27

Is this what you looking for?

Try any of these methods

<div>
  <strong>1. Make the image as button background. </strong>
</div>
<div>
  <button id="inc-fps-btn" class="ui button" style="height:40px; width:40px; background: url('https://placeimg.com/131/131/nature');  
        background-size: cover; ">
</button>
</div>

<div>
  <strong>2. Make the image in button with full size. </strong>
</div>
<div>
  <button id="inc-fps-btn" class="ui button" style="height:40px;
               width:40px; padding: 0;
               background-size: 100%;
               background-size: 20px auto;">
    <img src="https://placeimg.com/131/131/nature" style="width: 100%; height: auto">
</button>
</div>

score -1 · Answer 2 · answered Jul 22 '18 at 09:23

First of all, avoid declaration of background-size twice:

background-size: 100%;
background-size: 20px auto;

And use an automatic resize of the background image using:

background-size: contain;
background-image: url('res/img/inc-btn-30.png');

or

background-size: cover;
background-image: url('res/img/inc-btn-30.png');

score -1 · Answer 3 · answered Jul 22 '18 at 09:32

-1

<button id="inc-fps-btn"
    class="ui button"
    style="height:20px;
           width:20px;
           overflow:hidden">
<img src="http://www.placehold.it/30/000" style="width:100%;height:100%">

answered Jul 22 '18 at 09:32

Ammar A Hasan

26
1
2

1

Answers should always describe *why* any code snippets are useful/will solve the problem. Please add a description to explain how your suggested change will answer the question. – Steve Land Jul 22 '18 at 09:52

button's background image doesn't shrink

3 Answers3