JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="background_canvas">
    <section class="front_img"></section>
</div>

CSS

#background_canvas {
    overflow: hidden;
    background-image: url(http://test.cableaccess.cn/ken/images/bodybg.jpg);
    width: 800px;
    height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
}
.front_img {
    background-image: url(http://placehold.it/200x200);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width:200px;
    height:200px;
    position:relative;
    top:50%;
    left:50%;
    margin-top: -100px;
    margin-left:-100px;
}

JavaScript

$('#background_canvas').mousemove(function (e) {
    var amountMovedX = (e.pageX * -1 / 20);
    var amountMovedY = (e.pageY * -1 / 20);
    var amountMovedA = (e.pageX * -1 / 10);
    var amountMovedB = (e.pageY * -1 / 10);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
    $('.front_img').css('background-position', amountMovedA + 'px ' + amountMovedB + 'px');
});