CSS image inside another image with overflow:hidden

Question

So I want to center an image inside another image (a computer screen), but it seem not to work with the overflow:hidden. I put posiition:absolute on the image inside, but then the other image disappered.

My CSScode:

  .desktop-image {
        background-image: url("image-1.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .desktop-image img {
        width: 20%;
        position: relative;
        z-index: -999;
        left: 40%;
    }

My HTML:

<div class="desktop-image">
                    <img src="image-2.jpg" alt="">
                </div>
   </div>

Answer 1

set your "computer screen" image as a background of a div

div {
  background: url('computer-screen.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}