Двойной фон изображения перемещается при наведении курсора мыши ⇐ Html

[Anonymous]

Я пытаюсь создать HTML-страницу, фон которой перемещается в противоположном направлении от мыши. Проблема в том, что я хотел создать двойной слой изображений: фон и передний план. Изображение переднего плана меньше, а фоновое изображение имеет полную ширину. Вот мой код:

Код: Выделить всё

trymoving


body
{
margin:0;
padding:0;
}

section
{
height:100vh;
background:url(background-image.png);
overflow:hidden;
}

.sec2 {
width: 100%;
position: relative;
top: 0;
left: 0;
background:url('foreground-image.png');
}










const section = document.getElementsByTagName('section')[0];

section.addEventListener('mousemove', (e) =>{
const moveX = (e.pageX * -1 / 40);
const moveY = (e.pageY * -1 / 40);

section.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
});

const section2 = document.getElementsByClassName('sec2')[0];

section2.addEventListener('mousemove', (e) =>{
const moveX = (e.pageX * -1 / 10);
const moveY = (e.pageY * -1 / 10);

section2.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
});

Моя текущая проблема заключается в том, что изображение переднего плана выровнено по левому краю. Я хочу, чтобы это было прямо посередине. Кроме того, я хочу сделать его адаптивным для экранов разных размеров.

Подробнее здесь: https://stackoverflow.com/questions/674 ... -mouseover