How do I make the background image for my page blurry without affecting any of the other content on the page?

Question

How can I use an image for the background of my page and add a blur affect without affecting the other content on the page or the sizing/positioning of the image itself? I did try researching the question, but I couldn't find any solutions that really helped me. I do apologize if this has already been asked/answered a lot though. Things I tried:

I added my background image to a body selector and added filter: blur; and -webkit-filter: blur; (I got these off of a w3schools tutorial, I don't actually know if I need both of them), but this affected everything on the page, not just the background which I kind of assumed would happen anyways.
I also tried doing the same thing by adding my background image to the body, but instead used backdrop-filter: blur;, and it sort of worked, but it didn't blur the edges of the screen, or any areas where content wasn't located. What I did:

  body {
  background: url("https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2014/11/bloodborne-newhunter-03.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(5px);
}

Lastly, I tried creating a <div> tag and adding my background image to it, as well as filter: blur; and -webkit-filter: blur;. Nothing showed up at first, but I learned it was because I was using an empty <div> tag. I'm not actually sure what I am supposed to put in the div tag though, and I tried playing around with the padding and stuff, but I couldn't really figure out what to do. The background image just ended up all wonky, I couldn't figure out how to get it to cover the entire background of the page, and items also couldn't go on top of it like they would if it was just a part of the background. What I tried (I pretty much copied it off of w3schools, so I don't even know what all of it does):

<div class="bg-image"></div>

.bg-image {
  background-image: url("https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2014/11/bloodborne-newhunter-03.jpg");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

So what's the best way to simply add a background-image to my page and then blur it? I'm sorry if this has a really easy solution, I am new to coding still and am also just getting back from a break, so I am still really early in learning. This is also my first post on this site, so I apologize if I am doing this wrong.

Welcome to SO! Your second approach is close but not quite right-- `backdrop-filter: blur` isn't correct syntax, you'd need something like `backdrop-filter: blur(1px)`, and increasing the `px` value increases the blur. However, to really understand the issue you'd need to include code as a [mcve] in the question body. I recommend all new users visit [ask] for tips on how to best form questions so the community can best provide you with guidance; check it out! Good luck, and happy coding! — Alexander Nied, Aug 19 '21 at 17:11
Using what you provided, I added the background-image to your div and set ```filter: blur(5px);``` this works but you need to give your ```
``` a set HxW otherwise it thinks it's just 0 and doesn't show anything. — Brandon, Aug 19 '21 at 17:30
For what it is worth the top several answers on the marked duplicate are out of date -- `backdrop-filter` should be sufficient for your needs at this point. — Alexander Nied, Aug 19 '21 at 17:32

Krzysztof Antosik · Accepted Answer · 2021-08-20T09:04:31.510

After body, you need to add a<div>tag with the css property:backdrop-filter: blur (1px);before the rest of the page.

Here's an example:

body {
  margin: 0;
  padding: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
  color: #fff;
  width: 100%
}

main {
  width: 50%;
  border: 5px solid red;
}

#amazing__filter{
  backdrop-filter: blur(4px);
  background: #ffffff20;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
footer {
  width: 100%;
  height: 40px;
}

<html>
  <head>
  </head>
  
  <body>
    <div id="amazing__filter">
      <main>
       <header>
        <h1>
         A spectacular solution to the problem
       </h1>
      </header>
       <h2>
         List of the same words to fill the page
       </h2>
       <ol>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
        </ol>
      </main>
      <aside>
      </aside>
      <footer>
       <p>Footer</p>
      </footer>
    </div>
  </body>
</html>

This is unnecessary-- you can apply the `backdrop-filter` to the body itself and get the same affect. — Alexander Nied, Aug 19 '21 at 17:29
Doing it this way allows you to add a transparent color to the effect. Note that you cannot use the `backround` property twice for one item. — Krzysztof Antosik, Aug 19 '21 at 17:36
Sure, but if you're already using the [`background` shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/background) you can just include a background image _and_ a color; or you could just use separate [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) and [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) properties. — Alexander Nied, Aug 19 '21 at 18:17
Sure you can do that, but it only works if you add `background-blend-mode:` to it. And your way has an advantage because it reduces the amount of HTML tags. — Krzysztof Antosik, Aug 19 '21 at 18:26
@KrzysztofAN I am using backdrop-filter and it works, however I have my content set to take up only 50vw in the center, and so when I apply the backdrop filter it only blurs the background in the center where my content is at. How do I make it so that it blurs the entire background without having to stretch out my content? Is there a way I can like set the width of the box that contains my content to take up the whole page so that it will blur the whole background, but make it so that, say, my paragraph will still only take up the 50vw in the center of the page? — Kaitlyn Argyle, Aug 19 '21 at 18:51
@KaitlynArgyle - I see now one advantage to KrzysztofAN 's extra-markup approach is that it allows one way for ensuring you cover the whole page. I'd recommend taking a look at [this answer in the duplicate](https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image#40761151), as it might solve the new issue you are facing. — Alexander Nied, Aug 20 '21 at 00:33
@KaitlynArgyle Check the code snippet changes introduced by me and write whether this solution suits your needs. — Krzysztof Antosik, Aug 20 '21 at 07:47

How do I make the background image for my page blurry without affecting any of the other content on the page?

1 Answers1