CODEWITHSUNDEEP
htmlcss
VladJ
VladJ

Reputation: 117

How can I set background image of button to left-align?

How can I make the background image appear near the left border of the button? 

.button1 {
  background-color: transparent;
  background-image: url('nebifat.png') no-repeat;
  font-size: 30px;
  padding-left: 64px;
  text-align: left;
  position: relative;
  border-style: none;
  height: 7%;
  width: 50%;
  vertical-align: middle;
  margin-top: 10%;
  opacity: 0.6;
}
<center>
  <button id='r1' class='button1'>Matematica si Fizica</button>
</center>

Upvotes: 2

Views: 838

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You set no-repeat in background-image, instead you can use background: url('...') no-repeat or background-repeat: no-repeat, also center has been removed from the Web standards. And you can position background with background-position

.button1 {
  background-color: transparent;
  background-image: url("http://placehold.it/50x50");
  background-repeat: no-repeat;
  font-size: 30px;
  padding-left: 64px;
  text-align: left;
  position: relative;
  border-style: none;
  height: 7%;
  width: 50%;
  vertical-align: middle;
  margin-top: 10%;
  opacity: 0.6;
  border: 1px solid black;
  background-position: left;
}
<button id='r1' class='button1'>Matematica si Fizica</button>

Upvotes: 3

Related Questions