CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 2018

Background image on a button

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: enter image description here

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>

Upvotes: 0

Views: 1200

Answers (2)

mr.Hritik
mr.Hritik

Reputation: 622

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>

Upvotes: 1

Taha LAGHZALI
Taha LAGHZALI

Reputation: 534

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>

Upvotes: 1

Related Questions