Antoni Antoni - 4 years ago 91
CSS Question

cannot use background position to position div

I would like to display a circle on top of a map. But the circle is always displayed on the left top of the map regardless of the background position coordinates. I tried to set the background position as 40px 40px but the circle still displayed on the left top of the map. Can someone tell me how I could display the circle anywhere on top of the map by specifying the coordinates?

Here are my code snippets:



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<div id="theIcon" style="position: absolute;z-index:100;width: 30px;height: 30px;border-radius: 50%;font-size: 10px;color: #fff;line-height: 30px;text-align: center;background: red;background-position: 40px 40px";></div>

<div class="ClsdrawArea" id="draw_area" style="width: 900px; height:900px; background-image: url('https://s30.postimg.org/snqug5qd9/Path_Finding_Map.png'); background-repeat: no-repeat; background-size:cover">
</div>

</div>




Answer Source

For make this use top:40px and left:40px. You can use too position:fixed for fix the circle on top

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
  <div id="theIcon" style="position: absolute;z-index:100;width: 30px;height: 30px;border-radius: 50%;font-size: 10px;color: #fff;line-height: 30px;text-align: center;background: red;background-position: 40px 40px;top:40px;left:40px";></div>

    <div class="ClsdrawArea" id="draw_area" style="width: 900px; height:900px; background-image: url('https://s30.postimg.org/snqug5qd9/Path_Finding_Map.png'); background-repeat: no-repeat; background-size:cover">
 </div>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download