I'm developing an interactive map and need to position some images inside it, I'm using the top and left properties to position the element, the problem is that the position changes at different resolutions. The map is like body background and size cover.
Resolution Compatibility
1
asked by anonymous 07.11.2015 / 16:39
1 answer
3
Your problem occurs because the background image will be adaptable for each resolution, which would be unfeasible to make markings with an absolute position.
See this example that recreates your situation: jsfiddle
The solution would be to leave the image inside a fixed-size div, so your markup will work and will remain.
See this example working: jsfiddle
Marking in the state of São Paulo is fixed no matter the resolution.
The procedure to make this responsive would be to create some pre-set sizes according to your @media .
07.11.2015 / 17:29