JSFiddle - React, Tailwind, and code Playground

by Egor Jvechkin

HTML

<div class='image'>
  Hello
</div>

CSS

.image {
  background-image: url(http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
  width: 600px;
  height: 600px;
  background-position: 0 0;
}

JavaScript

var img = document.getElementsByClassName('image')
var position = '0 0'
console.log(img)
document.addEventListener('keydown', function() {
  position = position
    .replace(/px/g, '')
    .split(' ')
    .map(cor => cor - 5 + 'px')
    .join(' ')
    .trim()
  img[0].style['background-position'] = position
})