javascript - What is the best way to approach this background image issue? -

my goal:

so making webpage map of usa "background image" , on top of map have 10 markers pointing specific location. markers not part of picture thats me adding them absolute positioning , top , left percentage.

the problem:

as scale down page or scroll , down markers have set absolute positioning begin move out of spot suppose on because background-image getting smaller displaying 100%.

the question:

how can achieve want markers on map suppose not moving window being scaled down?

now know of 1 solution , solution can take long time. thinking instead of positioning markers want on map percentage can pixels , use ton of media queries , keep on adjusting it. not solution going take extremely long not seems correct way go this.

html:

<div class="container main-content"><!--the map background image set here--> <div class="row relative">     <div class="eq-content-wrap">         <div class="eq-content">             <div class="marker"></div> <!--the marker positioned absolute-->         </div>     </div>   </div> 

css:

html, body{             width: 100%;             height: 100%;             margin: 0px;             padding: 0px;             background: #000; } body{ overflow: hidden; }  .main-content{                 background: url('assets/img/map1.jpg') no-repeat top center;                 background-size: contain;                 height: 100% !important;                 width: 100% !important; } .eq-content-wrap{                 position: absolute;                 width: 500px !important;                 top: 22%;                 left: 40%; }  .marker{                         height: 40px;                         width: 40px;                         border-radius: 100%;                         background-color: red;                         position: absolute;                         top: 50%;                         margin-top: -20px; } 

the problem background image's size set 100%: background-size: 100%. means when browser tries scale content, background not scale (it stays 100%).

your best bet remove background-size property completely. allows markers stay in place when page scales, however, won't full-screen background effect have (unless have larger image).

the background still move, however, once browser window width less image's width. because have background-position set top center. center causes move once browser window width less image width. change center left , fix issue. you'll need set marker's container based left work on wider screens though. basically, removing center properties help, screen wouldn't centered on wide screen.