Menu
Using background-image on body tag and
two div's inside it.
I need to have blurred background for each
div.
what I can do now is to set background-image on
each div and using filter: blur property to blur them.
but because I want the same background for whole page(not separated for each div),
the way I want it to be is to set background-image
on body tag and then blurring div elements.
That's what I've tried:
body {
background-image: url(public/images/billy-huynh-W8KTS-mhFUE-unsplash\ \(1\).jpg);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
position: relative;
}
.parent-div::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(5px);
}
.parent-div {
position: relative;
}
HTML code:
<body>
<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>
<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>
In fact, I want to blur div elements with no background image.
Is there a way to do so?
thanks
917
asked Oct 24 '25 18:10
What you are looking for is backdrop-filter
body {
background-image: url(https://i.picsum.photos/id/174/800/800.jpg);
background-attachment: fixed;
background-size: cover;
height: 100vh;
margin:0;
position: relative;
}
.parent-div {
position: relative;
height:50vh;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>
<div class=" parent-div">
<div class=" child-div">
<h4 class=" text-light">Hello world!!</h4>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
