Background image on a button-CodePudding

I am having trouble adding background image to my button, it doesnt display the entire image. How do I set up css properly for this?

I am trying to achieve this:

I want also this to be responsive, and possible to add box shadow as an active class.

button {
  background-image: url('https://i.imgur.com/F88BjNN.png');
  background-position: center;
  background-size: cover;
  height: 30px;
  padding: 40px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  gap: 15px;
}

<div class="buttons">
  <button>test</button>
  <button>test</button>
  <button>test</button>
</div>

CodePudding user response：

You don't need to specify the position property also you have to set the background size at 100%

button {
  background-image: url('https://i.imgur.com/F88BjNN.png');
  background-size: 100% 100%;
  height: 30px;
  padding: 40px;
  border:none;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  gap: 15px;
}

<div class="buttons">
  <button>test</button>
  <button>test</button>
  <button>test</button>
</div>

CodePudding user response：

I have made some changes in your CSS. I think this is what you trying to achieve.

button {
  background-image: url('https://i.imgur.com/F88BjNN.png');
  background-size: 100% 100%;
  background-position:left;
  display: flex;
  height: 20px;
  padding: 40px;
  border:none;
  width: 250px;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  gap: 15px;
}

<div class="buttons">
  <button>test</button>
  <button>test</button>
  <button>test</button>
</div>

CodePudding user response：

Check the below snippet.

For mobile screens also, you can keep the same ratio.

button {
  background-image: url(https://i.imgur.com/F88BjNN.png);
  background-position: center;
  background-size: cover;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  cursor: pointer;
  border: 0;
}

button:hover,
button:active,
button:focus {
  box-shadow: 4px 4px 5px 1px #666;
}

div {
  display: flex;
}

<div class="buttons">
  <button>test</button>
  <button>test</button>
  <button>test</button>
</div>