How to make background-image responsive? - css

Question

I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?
My site:
https://wandawix.github.io/online-zoo/index.html
My code:
https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}

Answer 1

Try using this:
.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
#media only screen and (min-width: 968px) {
height: 75vh;
}
}
And see if this works