Hotspots On Full-screen Backgrounds With Background-position: Center

I recently ran into a problem when trying to position hotspots on top of a full-screen background image with the focal point being at the center of the image (I looked into using i

Solution 1:

since the image is scaling from the center, we also need to scale the hotspots from the center:

http://codepen.io/agrayson/pen/vObLmZ?editors=001

if (windowAspectRatio > imageAspectRatio) {
  yPos = (yPos / imageHeight) * 100;
  xPos = (xPos / imageWidth) * 100;
} else {
  yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
  xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
}