SOURCE

/**
  Small plugin to set the focal point of a background image
**/
var Focal = {
  

  /**
    Set variables
  **/
  init: function() {
    Focal.picker = $('#focal-img'); // image to click
    Focal.point = $('#point'); // cyan focal dot
    Focal.background = $('#background-container'); // where background element is applied
    Focal.controls = $(".control"); // control to toggle between desktop, mobile and tablet
    Focal.viewport = $('.viewport'); // viewport to switch between screen sizes
    Focal.results = $('.results');
    Focal.x = '0%'; // x background position
    Focal.y = '0%'; // y background position
    Focal.setEventListeners();
  },

  
  /**
    Event Listeners
  **/
  setEventListeners: function() {
    Focal.picker.on('click', this.setFocalPoint);
    Focal.point.draggable({
      cursor: "move",
      drag: this.dragging,
      containment: "#picker"
    });
    Focal.controls.on('click', this.changeViewport);
  },

  
  /**
    Move the focal point 
  **/
  setFocalPoint: function(e) {
    var pointYOffset = e.offsetY - Focal.point.height() / 2,
      pointXOffset = e.offsetX - Focal.point.width() / 2;
    Focal.point.css({
      top: pointYOffset,
      left: pointXOffset,
    });

    Focal.x = Math.round((e.pageY - $(this).offset().top) / Focal.picker.height() * 100);
    Focal.y = Math.round((e.pageX - $(this).offset().left) / Focal.picker.width() * 100);

    
    Focal.background.css('background-position', Focal.x + "% " + Focal.y + "%");
    Focal.updateResults();
  },

  
  /**
    Move focal point and background position when dragging point
  **/
  dragging: function(e) {
    Focal.x = Math.round(e.target.offsetLeft / Focal.picker.width() * 100);
    Focal.y = Math.round(e.target.offsetTop / Focal.picker.height() * 100);

    Focal.background.css('background-position', Focal.x + "% " + Focal.y + "%");
    Focal.updateResults();
  },
  
  
  /**
    Toggle viewport size
  **/
  changeViewport : function(e) {
    var type = $(this).attr('id');
    Focal.viewport
      .removeClass('desktop')
      .removeClass('mobile')
      .removeClass('tablet')
      .addClass(type);
    Focal.controls.removeClass('active');
    $(this).addClass('active');
  },
  
  
  /**
    Update Results tag
  **/
  updateResults : function() {
    Focal.results.text('Position: ' + Focal.x + '% ' + Focal.y + "%");
  },
    
  
};


$(document).on('ready', Focal.init());

<div class="viewport desktop">
  <div id="background-container">
  </div>
</div>

<div id="positioner-container">

  <p class="picker-title">Choose background image focal point:</p>
  
  <div id="picker">
    <img id="focal-img" src="http://www.amazingwallpaperz.com/wp-content/uploads/Photography-Widescreen-Background-Wallpapers.jpg">
    <div id="point" class="ui-widget-content"></div>
  </div>
  
  <div class="controls">
    <span class="results">Position: 0% 0%</span>
    <span id="desktop" class="control active"><i class="icon-desktop"></i></span>
    <span id="tablet" class="control"><i class="icon-tablet"></i></span>
    <span id="mobile" class="control"><i class="icon-mobile-phone"></i></span>  
  </div>
</div>

* {
  max-width: 100%;
}
body {
  height: 100%;
  width: 100%;
  background: #eaeaea;
  font-family: "Roboto";
  color: #424242;
}

// Container for background image
#background-container {
  height: 100%;
  width: 100%;
  background: url(http://www.amazingwallpaperz.com/wp-content/uploads/Photography-Widescreen-Background-Wallpapers.jpg) 0% 0% no-repeat transparent;
  background-size:cover;
  will-change: background-position;
}

// Container for picker
#positioner-container {
  position: absolute;
  bottom: 3em;
  left: 3em;
  background: #fafafa;
  width: 20em;
  max-width: 45vw;
  box-shadow: 0 2px 5px rgba(0,0,0,.26);
  z-index: 10;
  text-align: center;
  padding: 0 0.5em 0.25em;
  box-sizing: border-box;
}
// Title
.picker-title {
  text-align: left;
  margin: 12px 0;
  font-size: 14px;
  font-weight: bold;
}
// Wrapper for image and point
#picker {
  position: relative;
}
// Blue point
#point {
  background-color: cyan;
  width: 1.5em;
  height: 1.5em;
  opacity: 0.7;
  top: 0; 
  left: 0;
  position: absolute;
  border-radius: 50%;
  cursor: move;
  &:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
}


.viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.6, 1);
  transform: translate3d(-50%,-50%,0);
  will-change: width, height;
  box-shadow: 0 2px 5px rgba(0,0,0,.26);
  &.mobile {
    width: 320px;
    height: 480px;
  }
  &.tablet {
    width: 568px;
    height: 824px;
  
  }
  &.desktop {
    width: 95%;
    height: 95%;
  }
}

.controls {
  text-align: left;
  padding-right: 0.25em;
  color: #666;
}
.results {
  font-size: 12px;
  margin: 12px 0;
  display: block;
  font-weight: bold;
}
.control {
  font-size: 1.25em;
  display: inline-block;
  margin: 0 0.25em;
  vertical-align: sub;
  cursor: pointer;
  color: #000;
  opacity: 0.38;
  &.active {
    opacity: 0.60;
  }
}