the background image doesn't fit the container and gets cropped-CodePudding

the background image doesn't fit the container and gets cropped but when I change the viewport, there is no problem.

#product-overview {
  background: url("images/freedom.jpg") left 10% bottom 20% / cover no-repeat
    border-box;
  width: 100%;
  height: 550px;
  padding: 10px;
  margin-top: 43px;
  position: relative;
}

what should I do?

CodePudding user response：

Try using contain instead of cover

CodePudding user response：

Try using background-position: center;

CodePudding user response：

#product-overview {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: /* Image Width /*;
height: /* Image Height /*;
padding: 10px;
margin-top: 43px;
position: relative;
}