JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div id="bg">
	
</div>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFF;
}
#bg {
	width: 500px;
	height: 500px;
	display: block;
	margin: auto;
	outline: 1px dotted orange;
	background-image: url(https://picsum.photos/1000/1000)
}

JavaScript

const el = document.querySelector('#bg')
el.addEventListener('mousemove', (e) => {
	let drag = 3
	setTimeout( () => {
		el.style.backgroundPositionX = -(e.offsetX/drag) + 'px'
		el.style.backgroundPositionY = -(e.offsetY/drag) + 'px'	
	}, 60)
})