HTML/CSS: Positioning a background element responsively - html

Question

Here's a rough mockup of what I am trying to create, I have the page laid out but the only piece left that I am struggling with is positioning the background circle in a way that is responsive.
I tried using position absolute with top & left positioning but even small screen changes will completely throw off the layout.
What would you guys recommend as the best way to approach this? Thanks!
code demo: https://jsfiddle.net/e91g8tdj/11/

Answer 1

Try this in your Css :
.yourClassHere{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 2

Since you haven't provided any demo of your working code so had to create a responsive one from scratch using css only. It might look a bit janky in the snippet below so its better to copy the code in a file and view in a browser.
Let me know in the comments if it breaks.
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
.divider1,
.divider2 {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.divider1 {
background-color: silver;
gap: 2rem;
}
.divider2 {
background-color: gray;
}
.row1,
.row2,
.row3 {
width: 90%;
height: 25%;
background-color: #2a2a2a;
}
.row3 {
width: 40%;
height: 70%;
}
.row1-row2-wrapper, .row3-wrapper {
width: 40%;
height: inherit !important;
display: flex;
justify-content: end;
align-items: center;
position: relative;
}
.row1-row2-wrapper {
flex-direction: column;
justify-content: center;
gap: 2rem;
z-index: 1;
}
.row1-row2-wrapper::before, .row1-row2-wrapper::after, .row3::before, .row3::after {
content: '';
position: absolute;
border: 4px solid #fff;
border-radius: 50%;
}
.row1-row2-wrapper::before {
inset: 0;
z-index: -1;
height: 105%;
width: 100%;
}
.row1-row2-wrapper::after {
width: 2rem;
height: 2rem;
bottom: -18%;
right: 24%;
}
.row3::before {
width: 1.4rem;
height: 1.4rem;
top: 18%;
right: 20%;
}
.row3::after {
width: 1rem;
height: 1rem;
top: 25%;
right: 16%;
}
<div class="container">
<div class="divider1">
<div class="row1-row2-wrapper">
<div class="row1"></div>
<div class="row2"></div>
</div>
</div>
<div class="divider2">
<div class="row3-wrapper">
<div class="row3"></div>
</div>
</div>
</div>