Blur Behind Div CSS

Question

I am working on a website, and I need to blue the background behind a div, and I am unable to find a way to do it using CSS.

I found an article that showed how to do it, but I was unable to accurately replicate it.

Here is the article: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

Here is my page: http://biolinks.redxte.ch/blur

If anyone can let me know what I'm doing wrong that would be great, thanks.

Answer 1

backdrop-filter: blur(10px);

It will blur area behind the element.

Answer 2

You were so close!

Remove position: relative on .name-container and add it to .head

Update:

Remove .name-bg, (use display: none if neccessary), and change .name z-index to 1 or greater. Then add this code.

.name:after {
  content: "";
  display: block;
  position: absolute;
  background-position: center -373px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(10px);
  border-radius: 8px;
  z-index: -1;
}

.head, .name:after {
  background-size: 1500px auto; /* Really, this */
  background-position: center; /* and this is the only code .head needs  */
  background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}

Note: As the site used, you have to set an absolute background-size unfortunately. Also, as @media code gets used, you gotta tinker with the code a little.

Hope it helps!