How to position elements to match the background later in responsive?

Question

css

Good afternoon, I'm interested in the right solution, how to correctly position the elements that should be combined with the background image?
There is a layout piece

image

Points on the tops of the mountains pulsate animatedly.
How to properly position text elements and these vertices in responsive?
When changing the width of the window, everything goes (
Absolutely position each element through media queries and use an image with a different resolution for different screens?

Answer 1

Something like this:
https://jsfiddle.net/37f6g2ho/2/
In the example, reduce the width (namely the width) of the result window.
It remains only to play with the percentage values ​​for the indents to get to the top. If you need to proportionally reduce the size of the points, then play around with the percentages of their width and height.
Knowing the width and height of the background image, divide the width by the height - you get the ratio, and then, having set an arbitrary value for the point width, multiply by the ratio and you get the desired height and, accordingly, an even circle :)
A little confusing, but remember the math)