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:

>Solution :

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

}

width and height will work when you use background-size property