Position And/or Scale Divs According To Scaling Background Image

I have a background image that is scaling proportionally according to the height/width of the browser window. I need to place divs on this background, these divs should be position

Solution 1:

I typed up a quick demo that might give you some ideas:

http://jsfiddle.net/techappetite/f74Fg/2/

Solution 2:

Do you mean like this?

Example: HERE

I'm not sure how you would work it with the Supersize plugin as it crops the image to keep it in proportion, and I wonder what might happen to "hotspots" that get cut out - In my example I'm not using script just have the image scaling to the viewport, which distorts it, but I can't think of a way to get the box to scale without being relative to the viewport percentage

just answering, with an idea and to see if the general idea is to create scalable hotspots?