Responsively position an image at specific target over background image

Monday, June 30, 2014

I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.


Both images scale properly, and the left position works so far, but not the top position.



img {
max-width:100%;
}

#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;


}


I have found some questions with answers that suggest:


Vertical Alignment or Positioning with Javascript


I've also looked into .position() and .offset(), not sure if either would work.


I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.


Here is my jsfiddle:


http://ift.tt/1r9Dunq







http://ift.tt/1r9Dwfc