Football Fantasy lineup with image and divs - html

Question

I am developing a little Fantasy Football web. For the lineup, I want to put some div's with the players data above an image of a football field, and want to make it responsive too.
My example code:
HTML:
<div class="container" style="position: relative;" >
<div class="tag">player</div>
<img class="img-fluid" id="image" src="<?php echo base_url() ?>assets/img/grass.jpg">
</div>
CSS:
<style type="text/css">
.tag {
float: left;
position: absolute;
left: 55px;
top: 100px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
The problem comes when the browser resizes or it's in mobile version, since the position of the divs goes elsewhere, even out of the image. There is way to establish the div's position relative to the image itself? So no matter if I access through a desktop or a cellphone it maintains its position and I can see the players in the position that I want. And in this case, it's better to have an image or maybe a div with a image background? Or maybe a bootstrap method/class can do something similar.
Desktop:
Mobile:
What I want to accomplish (edited with paint):

Answer 1

The problem is to get the players positioned correctly relative to the grass image whatever the device dimensions.
You can get a container div to take on the size of its contents by making it display: inline-block. Then you want the grass to fill as much as possible of the screen - but it must keep its aspect ratio. The method you have (using img rather than background-image) is probably the better one to use here because the sizing will occur automatically.
Once you have done that you can position your players in the x and y directions by giving their percentage positions. Also if you alter your HTML slightly so that the img comes first in the container it will always be behind the players you put afterwards. The players are positioned with absolute, as you have done, so that they do not effect each others' positions.
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: auto;
height: auto;
display: inline-block;
}
.tag {
position: absolute;
left: 55%;
top: 80%;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
font-size: 2vw;
}
#image {
width:100vw;
max-width: 100vh;
}
<div class="container" >
<img class="img-fluid" id="image" src="https://i.stack.imgur.com/3I0Ie.jpg">
<div class="tag">player</div>
</div>
I have rather arbitrarily set the font-size to be proportional to viewport width, so it shrinks proportionally, but you probably want to think about whether the smallest devices need a larger font size to be readable.