<div class='wrap'>
<div class='hero'>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
background: #000;
}
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url('https://avatanplus.com/files/resources/mid/57c076312f12a156c7cdb029.png');
background-repeat: no-repeat;
background-size: cover;
}
.hero h2 {
color: #fff;
font-size: 46px;
}
if('ontouchstart' in window == false){
$('body').mousemove(function(e){
var moveX = (e.pageX * -1 / 60);
var moveY = (e.pageY * -1 / 60);
$('.hero').css('background-position', moveX + 'px ' + moveY + 'px');
});
}
This Pen doesn't use any external CSS resources.