CODEWITHSUNDEEP
htmlcss
Hardyanto Putra Antony. K
Hardyanto Putra Antony. K

Reputation: 577

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>

Upvotes: 0

Views: 73

Answers (6)

Sandeep Garg
Sandeep Garg

Reputation: 353

You missed to provide position where you wanted it to render by providing combination of top/left/bottom/right and their pixel values.

I just added top and left style in your code snippet and you can see that it is showing shifted to right to top left corner.

Its coz when you specify position absolute it takes it position as top left corner of its parent dom element (having relative position.)

below is your code with my added style of top and left

<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;left:100px; top:20px";></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>

Upvotes: 1

Mahpooya
Mahpooya

Reputation: 559

background-position is for sets the starting position of a background image (background-image)

its not work for background colors.

you can do it with left and top properties with position:absolute or relative like this:

  <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;left: 40px;top: 40px;"></div>

Upvotes: 0

DaveOz
DaveOz

Reputation: 98

If you wanted to use coordinates you would need to use Map and Area tags in HTML

To just position the circle in a specific place use

TOP:50px; 
LEFT:50px;

Upvotes: 0

Paladice
Paladice

Reputation: 247

position absolute his relative to your web page. Try with 

position : relative;
top : 50px; 
left : 50px;

Upvotes: 1

Ronen Cypis
Ronen Cypis

Reputation: 21470

You need to add top & left properties to the positioned element (the red dot), and in addition, add to its wrapper element position:relative; so it will act as the positioning context, instead of the body.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="position:relative;">
  <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;top:120px;left:234px;"></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>

Upvotes: 1

P. Frank
P. Frank

Reputation: 5745

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>

Upvotes: 2

Related Questions