How To Blur Background Image Without Affecting The Child Element
Published: 2021-04-04 15:10:55

Let's pick up where we left off last week. <br>
So in [last week's article](https://dev.to/nazanin_ashrafi/remove-white-border-from-blurry-background-image-3d8j) I talked about getting rid of white borders. 
And now we want to set the blurry image as background and add some stuff in front of it.<br>
If you use the second trick,  you don't even need to read this article but if you're gonna use the first trick then stay with me .
<hr>


And now we want to learn how to do this :



![323222211.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617272854079/r9L6eAgTC.png)

<br><br>

The first thing you should absolutely avoid is doing this :

```html
<section class="blurry-bg">       <!-- Don't use section element as your background -->
    </section>
```

You need to <b>create a new div inside your section</b> and set a background image for that div. Because if you set it for your section, it will affect your child elements and things will get ugly , like this :

![tee.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617274779439/NDBiWSZkw.png)

Instead do this :
```html
 <section class="gallery-section">

<!-- Create a separate div for the background image -->
        <div class="blurry-bg"></div> 
    </section>
```

<br><br>

Now we need to set an image as the background and then blurred it , like how we did it in [last week's article](https://dev.to/nazanin_ashrafi/remove-white-border-from-blurry-background-image-3d8j)  :

```css
.blurry-bg {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blurry-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px);
}
```

![565.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617280100938/iYhRFysaG.png)

After doing so , you can add your child elements

```html
 <section class="gallery-section">
        <div class="blurry-bg"></div> 
        <p>Some text here</p>
        <img src="/img/000333.jpg">
    </section>
```

But there's gonna be a little problem here. Your elements will go below the background. <br>

![999.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617280460135/OtNxHTLIB.png)

We will fix it with relative/absolute positioning and z-index : <br>
Set your background element to <code> position: absolute; </code> and the parent element to <code> position: relative; </code>
 (which in our case is the section which I gave it <code> class="gallery-section"</code> ) 

```css

 .gallery-section {
    position: relative;
}

.blurry-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;  <-- comment z-index and see what happens -->

}
```

You might wonder why we need <code>z-index</code>

<i>Take a look at this pic </i>
<img src="https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2014/10/axes.png">

You see that blue layer ?<br>
This is where your elements are right now. in order to bring it back up to the surface (green layer) we set the <code>z-index</code> of the background to "-1" , meaning we sent green layer behind our elements.



<hr>
Here's the final touch 

```html
 <section class="gallery-section">
        <div class="blurry-bg"></div> 
        <p>Some text here</p>
        <img src="/img/000333.jpg">
    </section>
```

```css

 .gallery-section {
    position: relative;
}

.blurry-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.blurry-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(7px);
}
```

![323222211.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617272854079/r9L6eAgTC.png)

<hr>
<i> I've created a small project. 
You can check it out [here](https://nazaneyn.github.io/I_Care_A_Lot_gallery/) 

![Screenshot from 2021-04-03 20-47-14.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617466773378/MMDpE5cIw.png)

<br>
 And here is the link to [github](https://github.com/NazaNEYn/I_Care_A_Lot_gallery) </i>