How to fit background image to parent element? - css

Question

I'm struggling to fit the background image to the parent div if the screen size getting wider.
If screen size for mobile, the result is correct what I expect. But if the screen size getting wider the background image will cut off by the parent element.
While for desktop screen, the background image will cut off by parent element:
So far my code like this:
index.html
<div id="hero">
<div className="weekend">
<h1 className="text-center">WEEKEND FROM HOME</h1>
<h6 className="text-center">Stay active with a little workout.</h6>
</div>
<div className="position-relative text-center d-flex justify-content-center">
<img src={robot} alt="" />
<button className="btn btn-light lets-go text-center">
Let's Go
</button>
</div>
</div>
style.css
#hero {
background-image: url("../../assets/shapes/bg-1.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--pinky-50);
padding-top: 134px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 23px;
}
So far my solution is adjust padding and height for different screen size but it's not best practice, because sometime i missed for several screen size.
info: resolution of background image is 1366px x 732px