$(document).ready(function() { var $bg = $('.bg-img'), //data = $('#data')[0], elbounds = { w: parseInt($bg.width()), h: parseInt($bg.height()) }, bounds = { w: 1920 - elbounds.w, h: 1080 - elbounds.h }, origin = { x: 0, y: 0 }, start = { x: 0, y: 0 }, movecontinue = false; function move(e) { var inbounds = { x: false, y: false }, offset = { x: start.x - (origin.x - e.clientX), y: start.y - (origin.y - e.clientY) }; //data.value = 'X: ' + offset.x + ', Y: ' + offset.y; inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w; inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h; if (movecontinue && inbounds.x && inbounds.y) { start.x = offset.x; start.y = offset.y; $(this).css('background-position', start.x + 'px ' + start.y + 'px'); } origin.x = e.clientX; origin.y = e.clientY; e.stopPropagation(); return false; } function handle(e) { movecontinue = false; $bg.unbind('mousemove', move); if (e.type == 'mousedown') { origin.x = e.clientX; origin.y = e.clientY; movecontinue = true; $bg.bind('mousemove', move); } else { $(document.body).focus(); } e.stopPropagation(); return false; } function reset() { start = { x: 0, y: 0 }; $(this).css('backgroundPosition', '0 0'); } $bg.bind('mousedown mouseup mouseleave', handle); $bg.bind('dblclick', reset); });

 div.bg-img { background-image: url(https://wallpapershome.com/images/pages/pic_h/23843.jpeg); background-position: 0 0; background-repeat: no-repeat; background-color: blue; border: 1px solid #aaa; position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; }

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="bg-img"></div>