How to blur background image without affecting parents-CodePudding

So I want to blur only my background image whilst keeping the parents unaffected. I know that there are similar questions, they work but they make the layout messed up and some other stuff doesn't work. Anyways, here's my code. Thanks in advance.

Some stuff since SO says my post is mostly code: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis lorem, porta at massa nec, ultrices efficitur dolor. Ut ut sem et magna maximus maximus. Integer sagittis semper dui vitae tempor. Quisque vel enim eu enim congue placerat. Nullam eget nisl id dolor tincidunt dictum. Sed a metus non sem rutrum viverra a a sem. Maecenas interdum ultricies mauris vitae viverra. Fusce sagittis odio vel posuere porta. Vivamus luctus turpis tortor, id dignissim turpis efficitur eu. Nunc ut turpis eros. Etiam in metus erat. Etiam maximus venenatis congue. Praesent egestas ex ac erat rutrum aliquam. Fusce eget sollicitudin quam. Vivamus.

@import url('http://fonts.cdnfonts.com/css/elegant-2');
.container {
    background: rgba(0, 0, 0, 0.497) url(bg\ img.jpg);
    background-size: cover;
    background-blend-mode: darken;
    color: white;
    font-family: 'ELEGANT', sans-serif;
    letter-spacing: 2px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 5px;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    font-size: 14px;
    border-bottom: solid 1.4px white;
    width: 44%;
    font-weight: bold;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
}

.content h1{
    font-size: 60px;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: .4px;
    margin: 0;
}

.content p{
    font-size: 1.3rem;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: .4px;
    margin: 0;
}

a {
    text-decoration: none;
    color: white;
    margin-bottom: 10px;
    margin-top: 15px;
    transition: margin .15s ease-out;
}

.footer {
    margin-top: 87px;
}

.a:hover {
    margin-top: 10px;
}
p {
    margin-bottom: 0;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 0px;
}


p a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.btns {
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

button {
    background: transparent;
    border: solid 1.08px white;
    border-radius: 5px;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    padding: 5px;
    width: 80px;
    transition:color 0.15s ease-out, background-color .13s ease-out;
    cursor: pointer;
}

button:hover {
    background-color: white;
    color: rgb(0, 0, 0);
}

::selection {
    background: rgba(0, 0, 0, 0.39);
}

::-webkit-scrollbar {
    display: none;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing:border-box; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="efe.css">
    <link rel = "icon" href="image-924103.png" type="image/x-icon">
    <title>Ehehehe</title>
</head>
<body>
    <div >
        <div >
            <div >
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Home</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Services</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Location</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Contact</a>
            </div>
        </div>
        <div >
            <h1>Ehehehe</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            <div >
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                    <button>Facere</button>
                </a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                    <button>odit</button>
                </a>
            </div>
        </div>
        <div >
            <p>Site Design by <a href="#">Someone</a></p>
        </div>
    </div>
</body>
</html>

CodePudding user response：

I think you mean something like this: https://www.w3schools.com/howto/howto_css_blurred_background.asp

That means you should be able to just use 'filter: blur(xx)'.

CodePudding user response：

Added to divs with class .background and .foreground .background div has filter:blur attribute and .foreground div has backdrop-filter: blur attribute.

Check if this works for you.

@import url('http://fonts.cdnfonts.com/css/elegant-2');
.container {
            color: white;
            font-family: 'ELEGANT', sans-serif;
            letter-spacing: 2px;            
            display: flex;
            flex-direction: column;
            height: 100%;
            padding-bottom: 5px;
        }
        
        .background {
            background: rgba(0, 0, 0, 0.497) url(bg.jpg);
            background-size: cover;
            background-blend-mode: darken;
            background-repeat: no-repeat;
              filter: blur(3px);
              position: absolute;
              width: 100%;
              height: 100%;
        }
        
        .foreground {
          backdrop-filter: blur(6px);
        }


.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    font-size: 14px;
    border-bottom: solid 1.4px white;
    width: 44%;
    font-weight: bold;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
}

.content h1{
    font-size: 60px;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: .4px;
    margin: 0;
}

.content p{
    font-size: 1.3rem;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: .4px;
    margin: 0;
}

a {
    text-decoration: none;
    color: white;
    margin-bottom: 10px;
    margin-top: 15px;
    transition: margin .15s ease-out;
}

.footer {
    margin-top: 87px;
}

.a:hover {
    margin-top: 10px;
}
p {
    margin-bottom: 0;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 0px;
}


p a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.btns {
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

button {
    background: transparent;
    border: solid 1.08px white;
    border-radius: 5px;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    padding: 5px;
    width: 80px;
    transition:color 0.15s ease-out, background-color .13s ease-out;
    cursor: pointer;
}

button:hover {
    background-color: white;
    color: rgb(0, 0, 0);
}

::selection {
    background: rgba(0, 0, 0, 0.39);
}

::-webkit-scrollbar {
    display: none;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing:border-box; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="efe.css">
    <link rel = "icon" href="image-924103.png" type="image/x-icon">
    <title>Ehehehe</title>
</head>
<body>
    <div >
    <div ></div>
    <div >
        <div >
            <div >
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Home</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Services</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Location</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" >Contact</a>
            </div>
        </div>
        <div >
            <h1>Ehehehe</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            <div >
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                    <button>Facere</button>
                </a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                    <button>odit</button>
                </a>
            </div>
        </div>
        <div >
            <p>Site Design by <a href="#">Someone</a></p>
        </div>
          </div>
    </div>
</body>
</html>

reference :- https://css-tricks.com/almanac/properties/b/backdrop-filter/