在较小的可见容器内移动大图像

Question

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 1

If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.

 .cvrContainer { padding: 30px; width: 100%; height: 2000px; overflow: auto; background: url(https://picsum.photos/900/850); } .cvrPhoto { height: 300px; width: 200px; position: fixed; top: 57px; background: yellow; } 

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

Answer 2

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';