JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="background_1">
  <div id="background">
    <input type="range" id="i_range_x" value="50">
    <input type="range" id="i_range_y" value="50">
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

#background_1 {
  width: 200%;
  height: 200%;
}

#background {
  width: 100%;
  height: 100%;
  background-image: url("http://doekewartena.nl/catalogtree/shooting_ourselves/background.jpg");
  background-size: cover;
  //background-position: top;
  background-position-x: 0%;
  background-position-y: 0%;
}

JavaScript

$(function() {

  $("#i_range_x").on("change mousemove", function() {
    var val = $(this).val();
    console.log(val);
    $("#background").css("background-position-x", val + "%");
  });


  $("#i_range_y").on("change mousemove", function() {
    var val = $(this).val();
    console.log(val);
    $("#background").css("background-position-y", val + "%");
  });




});