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 {

#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: