README.md

Frosted Glass

Technique 1: Photoshop

Take a regular background image

and blur it however you like in Gimp/Photoshop:

Save the original and blurred image.

Set the body's background to the original image
and the div's background to the blurred image.

body {
  background: url('original_background.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.my_div {
  background: url('blurred_background.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* Set the width/height so you can check it out. */
  width: 70%;
  height: 200px;

  margin: 12% auto;
}

magik.

Technique 2: ::before

This gets weird on Chrome.
When you adjust the height of the window, the div's
background will not adjust with you.
But adjusting the width works fine..

This technique is all about toying with the ::before selector of the div.

Take a regular background image

and set the body's background to the image.

body {
  background: url('original_background.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

Here's where it gets freaky.

Create empty content in the div's ::before then set its z-index to -1.

.my_div::before {
  content: ' ';
  z-index: -1; /* places the blurred mess behind the div's content */
}

Expand this ::before pseudo-element to fit the size of the div. Then filter it.

.my_div::before {
  content: ' ';
  z-index: -1; /* places the blurred mess behind the div's content */

  position: absolute; /* expand */
  width: 100%;
  height: 100%;

  filter: blur(3px); /* filter */
  -moz-filter: blur(3px);
  -webkit-filter: blur(3px);
}

What you'll notice is that the top & left edges of this div won't be blurred.

This is because filter affects the entire pseudo-element within its parent as seen below.

The solution to this issue is to expand the pseudo-element past its parent then hide the overflow.

That way we get a clean blur all around.

.my_div {
  overflow: hidden;
}

.my_div::before {
  content: ' ';
  z-index: -1; /* places the blurred mess behind the div's content */

  position: absolute; /* expand */
  width: 110%;
  height: 110%; /*  expand past its parent's boundaries */
  top: -15px;
  left: -15px; /* position it to fill the top & left edges */
  
  /* This can actually be replaced with transform: scale(1.03); */

  filter: blur(3px); /* filter */
  -moz-filter: blur(3px);
  -webkit-filter: blur(3px);
}

Conclusion

Obviously using technique #1 would produce a bit more load time, but check out technique #2. On a slower windows computer running chrome, technique #2 slows down the page's maneuverability. It's your choice. A few Kb more load time vs choppy scrolling.