how to emulate responsive cover behavior for a full-screen image while positioning smaller images on it?

Issue

I try to make an image fill the whole screen, the same way it will if I put a background-image to the body with the background-size set to cover. But I also need to place small images on this image, to create animations, like an animal showing in a tree for instance.

In order to do that, I need to place these small images in percentages position and size of the image, so I cannot use a background-image.

What I do then, is to put the background image in a container, place the other images as absolute in the container, and make the container the size of the first image. Then I try to simulate the cover behavior with min-width and min-height, but it doesn't exactly do the same : the image don't scale down as much as the screen scale down (on firefox at least).

example of real cover effect :

(click on "full page" and use "developer tools" > "responsive design mode" to play with the size of the screen)

body {
  height: 100vh;
  margin: 0px;
  background-image: url(https://images.unsplash.com/photo-1683009427619-a1a11b799e05?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

example of simulated cover effect :

body {
  height: 100vh;
  margin: 0px;
  display: flex;
  overflow: hidden;
  place-content: center;
  place-items: center;
}
#img_wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}
#bg_img {
  min-width: 100vw;
  min-height: 100vh;
}
#cat {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 10%;
}

<div id="img_wrapper">
  <img id="bg_img" src="https://images.unsplash.com/photo-1683009427619-a1a11b799e05?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  <img id="cat" src="https://cdn.pixabay.com/photo/2017/09/01/00/15/png-2702691_960_720.png">
</div>

as you can see (on firefox at least), the cat keeps the right place and size, and the image will always at least cover the screen, but the image does not take the smaller covering size, so for example the guy in the bottom middle of the image quickly disappear on a mobile size screen with the second solution, when it does not with the background cover solution

Do you know how to fix that ? or a better way to do the intending behavior (the capability to place small images on a big one for any screen size) ?

EDIT

CBroe's answer works, So I'll show a complete example of it here.

I replaced its centering solution with one using flexbox, but it has no impact on the result.

The main idea is to use a container that has a fix ratio, so you can use a background image on it and it will not "move" relatively to the container's borders. This fixed ratio is a square.

Then you need to make this container always covering the screen size, and we do that with vmax unit (clever)

The result :

body {
  height:100vh;
  overflow: hidden;
  /* flex centering method : */
  display: flex;
  place-content: center;
  place-items: center;
}
#img_wrapper {
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1683009427619-a1a11b799e05?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* to get the square around the screen : */
  /* (change to vmin to get it inside the screen) */
  width: 100vmax;
  height: 100vmax;
  /* to avoid flex centering to shrink the width : */
  flex-shrink: 0;
}
#cat {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 10%;
}

<div id="img_wrapper">
  <img id="cat" src="https://cdn.pixabay.com/photo/2017/09/01/00/15/png-2702691_960_720.png">
</div>

Solution

Since you'll need to work with an "oversized" container here anyway, you can still use background image, there should be no need to switch to an "actual" image. I would start by giving the container 100vmin for width and height - that gets you a square, that fits into your viewport.

You can now easily position your other elements on there, using percentages. Once you arranged everything to your satisfaction, you switch from 100vmin, to 100vmax - now you have a square, that fully covers the smaller viewport dimension, and overflows it in the other. Now all that's left is to properly position it within the viewport.

As long as the wrapper itself is "positioned" (i.e., has a position value other than the default static), it serves as the reference point for its absolute positioned children. So if you got those set up in their correct positions using percentages, you should then be able to center the container in the viewport using something like the "classic" approach of https://stackoverflow.com/a/42121193/1427878:

position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);

And to not get scrollbars, you'll want to set overflow:hiddenfor whatever element that container is in - could be html/body, if this is supposed to be the only element, or an additional container that has height: 100vh set, or something like that.

Answered By - CBroe