How can I blur background image without affecting parents?

Question

I want to blur only my background image whilst keeping the parents unaffected.

@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 class="container">
        <div class="nav-container">
            <div class="nav">
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Home</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Services</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Location</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Contact</a>
            </div>
        </div>
        <div class="content">
            <h1>Ehehehe</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            <div class="btns">
                <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 class="footer">
            <p>Site Design by <a href="#">Someone</a></p>
        </div>
    </div>
</body>
</html>

score 0 · Answer 1 · answered May 23 '22 at 12:06

0

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)'.

answered May 23 '22 at 12:06

Pon pie

1
1

score 0 · Accepted Answer · answered May 23 '22 at 12:26

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 class="container">
    <div class="background"></div>
    <div class="foreground">
        <div class="nav-container">
            <div class="nav">
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Home</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Services</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Location</a>
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="a">Contact</a>
            </div>
        </div>
        <div class="content">
            <h1>Ehehehe</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            <div class="btns">
                <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 class="footer">
            <p>Site Design by <a href="#">Someone</a></p>
        </div>
          </div>
    </div>
</body>
</html>

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

How can I blur background image without affecting parents?

2 Answers2