CSS3 blur filter on HTML body tag

Question

Is it possible to have a background image on the Bodytag, and then add blur filter on it, whitout getting the blur effect on the div's thats inside the body ?

Or do U need to add it on the first div inside the body as I can see many ex. on ?

Answer 1

Using CSS filters, all child elements of the element being blurred will also be blurred. However, rather than clutter your markup with an extra div just for the sake of a bg image with blur, you can use a pseudo element.

Don't forget to give it a z-index below the other content. In this case I just used -1, but you could use any number and give the other elements another number higher.

CSS

body:before {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-filter: blur(10px);
  background: url(http://hackingui.com/wp-content/uploads/2014/05/meng2-1980x1000.jpg) no-repeat;
  background-size: cover;
}

Check it out on codepen