JSFiddle - React, Tailwind, and code Playground

by Adrian Carriger

HTML

You'll need to make the result area wide enough to view 600px.
<div i
<div id="compass"></div>
<input id="deg" placeholder="enter degrees" type="number" onchange="adjustImage()">

CSS

#compass{
    background-image: url('http://i.stack.imgur.com/OLVFE.jpg');
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 59.5%;
    height: 91px;
    width: 600px;
    border: 1px solid black;
}

#deg {
    margin: 20px;
    padding: 5px;
}

JavaScript

function adjustImage() {
	var deg = $('#deg').val();
    var addDeg = 0.20555 * deg;
    var start = 59.5;
    var newDeg = addDeg + start;
    $('#compass').css({'background-position': newDeg + '%'});
}
adjustImage();