How to make background image fit correctly inside a board without losing responsiveness

Question

I have code in which there is class box, i have given backgroundimage to class box box1.

my problem is that the image is not correctly fitting inside to the board.

when i rezize the window it is moving upwards.

How to correct it.

How to make the image fit correctly inside the board without losing responsiveness?

which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..

when itry to resize the window the window the image is moving upwards..

html, body {
 background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 width:100%;
 height:100%;
 overflow: hidden;
 background-size: 100vw 100vh;
}

#box1 {
  position: absolute;
  top: 55.3vh;
  left: -19.98vw;
  cursor: pointer;
  border:px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box1 p {
  width: 10.0vw;
 height: 1.0vh;
  border-radius: 25%;
}


#container {
  white-space: nowrap;
  border:px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}


.hidden{
  visibility: hidden;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: blue;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
      
        <div class="box box1" id="box1"  style="background-image:url(https://picsum.photos/200/300);">
          <p name="values" id="name1" class="hidden"></p>
        </div>

      </div>
    </div>
  </div>

Answer 1

I think you are tackling this the wrong way. I would instead extract the board element from the main background and use it as an element alone:

html {
  background: #afffdc;
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.sstatic.net/CM15R.jpg) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}

<div id="container">
  <div class="box">
  </div>
</div>

Update

Here is a transparent version

html {
  background: linear-gradient(to right,pink, lightblue);
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.sstatic.net/ctB0T.png) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}

<div id="container">
  <div class="box">
  </div>
</div>

Answer 2

If you want your image to cover it's container you can use background-size: cover;,

If you want make sure the whole image is being displayed (but being resized if needed), you can use background-size: contain;

The above two requires explicit width & height in the class box1