'Backroung image css not work height and width properties

I have a static image but now I need to pass it to a css. But when passing the image with the backround property in css it doesn't take the same shape as the original code and it looks messed up. Why is this happening if I am giving it the same dimensions as in the first code?

Original html works:

<a href="{{url}}" target="_blank"><img src="assets/img/latam.png" width="152" height="59" alt="" /></a>

New css:

  .img-latam {
    background-image: url("assets/img/latam.png");
    width: 152px;
    height: 59px;
 }

New html

<a href="{{url}}" target="_blank"><img class="img-latam" alt="" /></a>

result:

enter image description here

htmlcssimage


Solution 1:[1]

you have to write in CSS:

.img-latam{
  background-image:url("assets/img/latam.png");
  background-size: 100%; 
  width: 152px; 
  height: 59px;
}

Solution 2:[2]

You can use background-size to specify how you would like the background image to fill the container. I think what you're wanting is this:

  .img-latam {
    background-size: cover;
  }

You can read more on the different values you can pass for the background-size with examples here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlackFox
Solution 2 Jeith

Related Questions