The background image is cropped to the draggable div

Question

I try to do this when I have a div with a full background image and a div on top with a container, and that div is dragging and when dragging it shows the same image as the background, but changed.

Well, something from the lines of this pen

My CSS:

.contain{ position:relative; } #dummy{ background:url(http://i.imgur.com/CxYGDBq.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; } #dummy2{ position:absolute; top:0; z-index:99; left:0; } .mao{ background: url(http://i.imgur.com/UbNyhzS.png); width:250px; height:300px; position:absolute; bottom:0; z-index:999; background-size:contain; } .screen{ width:960px; height:995px; background-color:pink; position:relative; left:32px; top:30px; background-attachment:fixed; background: url(http://i.imgur.com/yjR8SCL.jpg); } 

Answer 1

If I understand your requirements correctly, you can do this by finding the current position of the drag object when moving it, and then using these values ​​to set the background-position background screen , providing a kind of x-backup effect.

 var imageOffset = { top: 30, left: 32 }; $(function() { var screenHeight = $('body').height() - 300; // 300: moa height $(".screen").css('background-position', -(imageOffset.left) + 'px ' + -(screenHeight + imageOffset.top) + 'px'); $(".mao").draggable({ axis: "x", drag: function(event, ui) { $(".screen").css('background-position', -(ui.position.left + imageOffset.left) + 'px ' + -(ui.position.top + imageOffset.top) + 'px'); } }); }) 

Codepen example: http://codepen.io/anon/pen/JWxwzK?editors=0000

You can also use the same code snippet to limit the hand to the left / right borders of the screen. Here is an example of code that can be done in official docs: http://api.jqueryui.com/draggable/#event-drag

Answer 2

For what I assume you want to do, I edited your pen to reflect the correct changes. You can see it here .

Incorrect Nesting The first thing that changed was the switch of the div that you wanted to drag the <div class="mao"></div> to be a child of the <div class="screen"></div> element.

CSS Image URLs Another thing to note is that when you specify a URL in CSS, you need to wrap it in quotation marks. These are $ url_here.