size an image inside a button

Question

size an image inside a button

Navigation

#1 by (1 votes)

0

I have a button that was created using the custom css buttons, but I changed the background for a custom image, how do I scale this image to fit the button?

follow the css

.port {
  -moz-box-shadow: 0px 1px 0px 0px #000000;
  -webkit-box-shadow: 0px 1px 0px 0px #000000;
  box-shadow: 0px 1px 0px 0px #000000;
  background-image: url('../images/br.png');
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
  background-color: green;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  border: 3px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Georgia;
  font-size: 16px;
  font-weight: bold;
  padding: 20px 50px;
  text-decoration: none;
  text-shadow: 0px 1px 0px white;
  position: absolute;
  top: 990px;
  left: 1690px;
}

.port:hover {
  background-image: url('../images/br.png');
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64', GradientType=0);
  background-color: green;
}

.port:active {
  position: absolute;
  top: 990px;
  left: 1690px;
}

The image is like this, I wanted the button to be round in this way and the image to surround it all. link

css

asked by anonymous 08.08.2017 / 20:29

1 answer

How to print a particular list from a string of a .csv using python Creating a custom class of type WritableComparator

score 1 · Accepted Answer

Just set the size of the button, leaving the rounded edges and a background cover for the image fill all leaving it centralized, eg:

background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
width: 100px;
height: 100px;