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);
}
<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.
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>