view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet below showcases my current progress. The background image fills the entire space and the container should be perfectly centered on top of it.
.circle123{
position: relative;
float: none;
width: 600px;
height: 200px;
top: 0;
margin-right:auto;
margin-left:auto;
text-align: center;
border: 1px solid black;
}
#circle1{
position: absolute;
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
padding: auto;
border-radius: 50%;
background-color: rgba(50,205,50, 0.75);
}
#circle2{
position: absolute;
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
padding: auto;
border-radius: 50%;
background-color:rgba(135,206,235, 0.75);
}
#circle3{
position:absolute ;
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
padding: auto;
border-radius: 50%;
background-color: rgba(220,20,60, 0.55);
}
.back-bar{
display: inline-block;
width: 100%;
height: 100%;
background: url(image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}<div class="back-bar"></div>
<div class="circle123">
<div id="circle1"><h2>1<h2></div>
<div id="circle2"><h2>2<h2></div>
<div id="circle3"><h2>3<h2></div>
</div>
</div>