Making my image blurry in certain parts - html

Question

My question is, how to i blur certain parts of my image?
Codepen of project (You can press Change View > Full Page to see the pen like a user would.)
It has a plain white div with background images behind it.
How could I make my .parent have a transparent background and my body have blur background?
Also how could I make the background image fit to screen?
Please comment below to ask for more information if needed.
I'm sorry if there's is already a similar post about this. This is my 2nd post on this website, so I'm sorry if I'm breaking any rules.

Answer 1

CodePen
Also how could I make the background image fit to screen?
Use background-size: cover.
.parent have a transparent background
Just remove the background property. Or use transparent rbga colors .
my body have blur background
Since the image is smaller than the background, this has been achieved naturally.
I used the filter property, which is applied to the entire element though. As a result, you must use an additional HTML element This could be a pseudo element, but I just used a div:
HTML: <div class="background"></div>.
CSS:
.background {
background: url("https://ak6.picdn.net/shutterstock/videos/10908707/thumb/1.jpg");
/* Apply major the blur filter. Change `1em` for more. */
-webkit-filter: blur(1em);
-moz-filter: blur(1em);
-o-filter: blur(1em);
-ms-filter: blur(1em);
filter: blur(1em);
/* Make background not move */
position: fixed;
/* ...and fill more than entire screen. Removes additional white sides from filter. */
top: -1em;
left: -1em;
right: -1em;
bottom: -1em;
/* Make the element appear behind all others */
z-index: -1;
/* Make the background cover the entire element */
background-size: cover;
}