How can i set height and width of background image of button?

Question

i just want to set properly height and width of background image of button that picture mentioned here!

float:right;
width: 40px;
height: 40px;
border-radius: 50%;

Please show us the CSS code that adds the background, and also the HTML for the button would be helpful so we can show it to you working :) — FluffyKitten, Aug 28 '20 at 18:17
There are already [lots of similar questions](https://stackoverflow.com/search?q=css+background+image+size) with answers to this on the site: [Background image full width and height](https://stackoverflow.com/questions/40673586/background-image-full-width-and-height) or [Fit background image to div](https://stackoverflow.com/questions/8200204/fit-background-image-to-div). Please check the site first before posting to see if an answer (or lots of them! ) already exist before posting... see [ask] — FluffyKitten, Aug 28 '20 at 18:22

score 3 · Accepted Answer · answered Aug 28 '20 at 18:21

3

You should use background-image with background-size: 100%.

button{
  background-image: url("https://i.stack.imgur.com/gdaRR.png");
  float :right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: 100%;
  border: none;
}

<button></button>

answered Aug 28 '20 at 18:21

Asaf

1,446
9
17

Your contributions are welcome, but please note that answering duplicate questions like this is against Stack Overflow guidelines. Otherwise we are just encouraging more poor questions :) Please see the "Answer well-asked questions" section in [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) Instead the correct action is to flag the question and link to with one of the already existing answers. Or simply just move on to well-asked questions :) – FluffyKitten Aug 28 '20 at 18:27

Oleh Horitsyn · Answer 2 · 2020-08-28T18:30:45.287

2

You are missing background-size property:

background-size: contain;

button {
  float:right;
  background: url('https://i.stack.imgur.com/gdaRR.png');
  background-size: contain;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

<button></button>

edited Aug 28 '20 at 18:30

answered Aug 28 '20 at 18:23

Oleh Horitsyn

386
4
8

yes this works thank you – Dharmik Aug 28 '20 at 18:26
Please add code answers as a Stack Snippet using the `[<>]` button in the answer editor - there is no need to go to an external site. Or better yet, flag questions that have been asked before and have lots of existing answers as **duplicate** instead of answering, as per the SO guidelines, instead of adding more "clutter" to the site :) See [answer] – FluffyKitten Aug 28 '20 at 18:27

How can i set height and width of background image of button?

2 Answers2