Razor Pages ASP.NET Core 6 - How to add background image with blur-CodePudding

I have successfully added a "background-image" to my Razor Pages application.

Now, when using "filter: blur(2px);" the header and footer blur, but not the image.

I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.

My _Layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - LifeCompanion</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav >
            <div >
                <div >
                    <div >
                        <button  type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
                            LifeCompanion
                        </button>
                        <ul  aria-labelledby="dropdownMenu2">
                            <li>
                                <a  type="button" asp-page="/LActions/ImageManagement">
                                    Images!
                                </a>
                            </li>
                        </ul>
                    </div>
                    <ul >
                        <li >
                            <a  asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li >
                            <a  asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div >
        <main role="main" >
            @RenderBody()
        </main>
    </div>
    <footer >
        <div >
            &copy; 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>
    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

My CSS - using site.css to apply changes globally - is:

html {
  font-size: 14px;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: url(../img/background.jpg) no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    color: white;
}

So far so good.

Now when adding to my css:

body {
    margin-bottom: 60px;
    background: url(../img/background.jpg) no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    color: white;
    filter: blur(2px);
}

The footer and header blurs, but not the background-image as anticipated.

CodePudding user response：

Replace filter: blur(2px); with backdrop-filter: blur(2px);.

CodePudding user response：

filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.