Question 44437 in Html Question posted in
Some basic documentation can be found here.

Backdrop blurred div is not covering entire screen – Html

I have a div called overlay and then a container called signupContainer. I want the overlay div to cover the entire screen but be blurred in the background. This is my code:

html, body {
    background-image: url('https://host.stcollier.repl.co/img.png');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1000px;
    background-color: rgba(255, 255, 255 0.5);

}

.blur {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: -99;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
}

.signupContainer {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 99;
    color: white;
}
<div class="blur"></div>

<div class="signupContainer">
  <h1>Sign Up</h1>
</div>

Here’s how that looks:
enter image description here
Notice how the backdrop filter blur is not covering the entire screen, but only the point to where other element is. Why is this and how can I fix this?

Tags:

2

Answers


  1. 0

    It’s because the backdrop position is relative so it’s not covering the entire page.

    you could use this:

    .blur {
    position: absolute;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    z-index: -99;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
}
    Login or Signup to reply.
  2. 0

    Just remove the html selector from the first rule, and then it will work. You’re applying two background images unnecessarily and it seems that this is causing a wrong rendering.

    body {
    background-image: url('https://host.stcollier.repl.co/img.png');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1000px;
    background-color: rgba(255, 255, 255 0.5);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search