Как продолжить верстку после применения mousemove на фоне

[DVV]

Создал эффект движения фоновой картинки при перемещении на ней курсора, но теперь не могу разобраться, как продолжить верстку других блоков сайта. Так как картинка имеет абсолютное позиционирование, то последующие блоки ложатся на нее, а не выстраиваются по порядку ниже.

https://cdn.rawgit.com/ViacheslavDem...130/index.html

[j0hnik]

так сделайте блок в котором она relative и меняйте при движении курсора background-position

[DVV]

Да, вроде сделал.

<div class="wrap">
				<div class="header__picture-front">
					<div class="header__picture-back"></div>
				</div>
	</div>

.wrap {
	position: relative;
}
.header__picture-front {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: #FFF;
}

.header__picture-back {
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	background-image: url("../img/bg/header-bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

$(document).ready(function() {
	
	let windowWidth = $(window).width();

		$('.header__picture-front').mousemove(function(e) {
			let moveX = (($(window).width() / 2) - e.pageX) * 0.1;
			let moveY = (($(window).height() / 2) - e.pageY) * 0.1;

				$('.header__picture-back').css('background-position', moveX + 'px');
				$('.header__picture-back').css('background-position', moveY + 'px');

		});

});

[DVV]

Вроде, получилось. Только теперь изображение как-то не так двигается, только по горизонтали.

https://cdn.rawgit.com/ViacheslavDem...749/index.html

[j0hnik]

$('.header__picture-back').css('background-position-x', moveX + 'px');
$('.header__picture-back').css('background-position-y', moveY + 'px');

[DVV]

Блин, вот не хватает у меня пока еще опыта на такие мелкие, но важные детали. В очередной раз большое спасибо!!!