See if this is what you want

Solution 1:

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.login-div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}

<div class="login-div">
  <h1>Log In</h1>
</div>
<div class="circles">
  <img src="https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg" alt="Image Test">
</div>

this z-index: -1; makes the element behind the other elements.

Solution 2:

.background--page {
    width: 100vw;
    height: 100vh;
    background-position: center;
}

.login-div {
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 200px;
}

<div class="background--page" style="background-image: url('https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg')">
  <div class="login-div">
    <h1>Log In</h1>
  </div>
</div>

Through background-image, you won’t have to work with the z-index.

I set the background color to white and it worked, so it wasn’t a z-index problem.

So I have 2 elements, the doted circles that should be z-index: -999; so they are 100% in the background and the second element a login form that should be z-index 999. But even dough they are position absolute the z-index doesn’t seem to take effect. Since I’m using flask I tried joining the files instead of having flask load the circles.html to the login.html but still doesn’t work.

Image with the problem:

The Login CSS:

.login-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    z-index: 999 !important;
}

Circles CSS:
.circles in the div that has inside the img with the circles.

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -999 !important;
}

I only have these two divs with z-index so I believe its not a stacking problem but let me know what you think.