Move large image inside smaller visible container

I am trying to do something basic (beginner in programming). I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.

So you can .

Move the yellow up or down while the user can see the red in the same position (kept in doc flow).

If i create an image using this :

<div class="cvrContainer top left">
    <div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>

1. Should i set cvrPhoto to be larger then cvrContainer say 200% ?
2. How do i move it up/down with JS while keeping overflow hidden.

I do not ask how to calculate, only how to set it and move the only yellow inside

Answer

I solved it by using css for the inner image (not background image but img tag) :

.prlxPhoto
{

     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translateY(-50%) translateX(-50%);

}

and move it left/right for example with :

var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';