Blurr background image, but keep image focussed in box area

Question

Does anyone know a css/javascript technique which does the following: Fullscreen background-image blurred, but a floating fixed with portion of that image not-blurred, yet that section stays centred and the same size on browser window resize. The background image needs to resize with the browser window, but the focussed section needs to remain centred and have the same box-size, while its clipped background image resizes together with the blurred background. see example image. Must be cross-browser compatible.

Answer 1

Try using two elements (using the same background image on both) but setting the background-attachment to fixed on both.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.blur-group {
  position: relative;
  width: 100%;
  height: 100%;
}

.blurred,
.unblurred {
  background: url('//placekitten.com/1000/750') 50% 50% no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.blurred {
  width: 100%;
  height: 100%;
  filter: blur(7px);
}

.unblurred {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
  border: 10px solid white;
}

<div class="blur-group">
  <div class="blurred"></div>
  <div class="unblurred"></div>
</div>