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">

  <button id="b_pos_x">pos_x</button>
  <button id="b_pos_y">pos_y</button>
  
  <button id="b_set_zero">set_zero</button>
  <input type="range" id="i_range" value="90">

  
</div>

CSS

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

#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: 50.0%;
  background-position-y: 50.0%;
}

JavaScript

$(function() {
	
var BackGroundController = function() {
	
  $background = $("#background");
    
  var set_zero = function() {
  	/*
  	$background.animate({
      "background-position-x": "25%"
    }, {
    	
    	//step: function( now, fx ) {
      //	console.log("step!");
    	//}
    }, 5000, function() {
    
      // Animation complete.
    });
    */
    
    $background.css("background-position-x", "0%");
    
  }
  
  
  var pos_x = function() {
  	
  	return $background.css("background-position-x");
  }
  
  var pos_y = function() {
  	return $background.css("background-position-y");
  }
  
  
  // return the API
    return {
        set_zero: set_zero,
        pos_x: pos_x,
        pos_y: pos_y,
    };
};

// ------------------------------------------------------

var log = function(args) {
	console.log(args);
}

// ------------------------------------------------------

var bg = new BackGroundController();


log("x: "+bg.pos_x());
log("y: "+bg.pos_y());
  

$("#b_pos_x").on("click", function() {
	log("x: "+bg.pos_x());
});

$("#b_pos_y").on("click", function() {
	log("y: "+bg.pos_y());
});

$("#b_set_zero").on("click", function() {
	bg.set_zero(); 
});

$("#i_range").on("change mousemove", function() {

	var val = $(this).val();
  log(val);
  $("#background").css("background-position-x", val+"%");
  
  
});



// ------------------------------------------------------

    
});