coderisimo

<div class="edit_position">
 <input id="position_y" value="0" type="range" min="0" max="100" step="0">
 <div id="position_images"
  style="background-image: url(http://storage4.static.itmages.ru/i/16/0109/h_1452366540_5854535_7e16dcb9c5.jpg);
  background-position: 0% 0%;"></div>
 <div class="clear"></div>
 <input id="position_x" value="0" onchange="editPosX();" type="range" min="0"  max="100" step="0">
</div>
<input type='text' id='info'>

function editPosX(){
 
  document.getElementById('info').value= document.getElementById('position_x').value;
}

document.getElementById('mydiv').innerHTML = '<span class="someClass">Новое содержимое</span>';

var form = document.forms.namedItem("fileinfo");

    form.addEventListener('submit', function (e) {

        e.preventDefault();
        var fd = new FormData(form);
        fd.append("action", "upload_diagram_image");
        jQuery.ajax({
            url: base_url,
            type: "POST",
            data: fd,
            enctype: 'multipart/form-data',
            processData: false, // tell jQuery not to process the data
            contentType: false   // tell jQuery not to set contentType
        }).done(function (data) {
            if (data !== 'error') { //
            
            }
        });
        return false;
    });

div{
  background-image: url('myimage');
  background-size:100%;
}
div:hover{
  background-size:120%;
}