I'm trying to create a DIV with a background image and on top of that image I need to position other DIVs . I placed these DIVs on top, but when resizing the screen the position of this DIVs , it does not stay in the same place.
Follow the code
<!DOCTYPE html>
<html>
<head>
<style>
body{margin: 0px; padding: 0px; height: 100%;}
.bgFundoGame{
background-image: url("fundo_game.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
margin: auto;
}
.pointGame{
width: 50px;
height: 50px;
background-color: #0f6ab4;
border-radius: 50%;
position: relative;
top: 62%;
left: 6.7%;
}
.bgFundoGame .pointGame:nth-child(2){
position: relative;
top: 34%;
left: 5.1%;
background-color: red;
}
</style>
</head>
<body>
<div class="bgFundoGame">
<div class="pointGame"></div>
<div class="pointGame"></div>
</div>
</body>
</html>