Lock Div to fixed position with background

Question

I'm trying to hold the yellow div element always on house window even if we resize browser, but I can't achieve it only with css, so looking for a JavaScript solution.

Here is my fiddle: http://jsfiddle.net/jj4fxpmy/6/

The prob is the yellow square moves up as I resize browser. I want it to stick to the house. It is important for me to keep background-position right bottom:

<div class="background"></div>
<div style="position: fixed; background: none repeat scroll 0% 0% gold; top: 50%; z-index: 2147483647; height: 50px; width: 50px; left: 79%;" id="square"></div>

.background{width:100%;height:100%;top:0%;left:0%;position:fixed;
 background:url(http://wallpapers.7savers.com/seasons---summer-wallpapers_1146_1920x1200.jpg) no-repeat; background-color:transparent; background-position:right bottom; background-size:100%;

Any help will be greatly appreciated.

Answer 1

You can achieved this by only CSS no need to add js. Use image tag instead of background and add yellow div inside it. you can refer the code below.

See HTML

  <img src="http://wallpapers.7savers.com/seasons---summer-wallpapers_1146_1920x1200.jpg" alt="">
  <div>
  <div class="yellow-div" id="square"></div>
  </div>
</div>

See CSS

.background{
  width:100%;
  height:auto;
  top:0%;
  left:0%;
  position:fixed;
}
.background img{
width:100%;
}

 .yellow-div{
background: none repeat scroll 0 0 gold;
    height: 3.1%;
    position: absolute;
    right: 18.1%;
    top: 68.9%;
    width: 1.6%;
}

You can refer this http://jsbin.com/pacewepari/2/edit?html,css,output

Answer 2

If you absolutely must have the house image set as a background positioned in the bottom right, you could try referring to this question: jQuery - drag div css background Or try this plugin: https://github.com/kentor/jquery-draggable-background

Here's my crazy idea:

1. Create a transparent image of the same dimensions as the house image, with a 50x50 yellow box.
2. Set it as a background with the same styling/positioning as the house background.
3. Hook it up with the jquery in either the referred overflow question or Kentor's jquery plugin

... And that should do it!