Backroung image css not work height and width properties-CodePudding

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  alt="" /></a>

result:

CodePudding user response：

  .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

CodePudding user response：

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.

CodePudding user response：

you have to write in CSS .img-latam{ background-image:url("assets/img/latam.png");background-size: 100%; width: 152px; height: 59px; }`