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 patible.

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 patible.

• javascript
• css
• image

• Check this. My answer is similar to Gaby aka G. Petrioli, so I didn't post again. I use this method from CSS Secrets book, secret 18(Frosted glass effect), page 146. – Alex Commented Apr 9, 2017 at 18:51
• That's very close! I would still need to keep the size of the small box fixed and centred on the page. Yours resizes with the page. See Gaby aka G. Petrioli's solution for a pletely functioning solution. Thanks! – jmux Commented Apr 9, 2017 at 21:01
• So you can use px instead vw and vh – Alex Commented Apr 10, 2017 at 6:43

4 Answers 4

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./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>

You can use image twice, center them, one above the other on a container using absolute position. Then, blur the first one and use clip-path to show a part of a second one. But maybe clip-path support is not enough today for your need :) https://jsfiddle/nesquimo/nnmquv1k/2/

.parent{
  position: relative;
}

.child{
  position: absolute;
  width: 100%;
}

.child:first-child{
   -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.child:last-child{
  -webkit-clip-path: inset(20% 18% 15% 20%);
  clip-path: inset(20% 18% 15% 20%);
}
<div class="parent">
  <img class="child" src="http://i.imgur./RRUe0Mo.png">
  <img class="child" src="http://i.imgur./RRUe0Mo.png">
</div>

Make the image responsive with blurr background

Markup

<div class="widget center">
  <div class="text center">
    <h1 class="">Responsive Blur</h1>
    <p>Resize me</p>
  </div>
  <div class="blur">
    <img src="https://static.pexels./photos/88212/pexels-photo-88212.jpeg" class="bg">
  </div>
</div>

CSS

img.bg {
  min-height: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
    -webkit-filter: blur(18px);
    -o-filter: blur(18px);
    filter: blur(18px);
}

.blur {
  height: 250px;
  width: 100%;
  margin: -20px auto;
  z-index: -1;
  position: relative;
  overflow: hidden;
}

.blur:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
}

.widget {
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  min-height: 200px;
  width: 45%;
  overflow: hidden;
   background-image: url("https://static.pexels./photos/88212/pexels-photo-88212.jpeg");
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


/*  NOT REQUIRED  */

.text {
  height: 200px;
  width: 340px;
}

.text h1 {
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, .1);
  color: #ffffff;
  margin-top: 70px;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 38px;
}

.text p {
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px rgba(0, 0, 0, .1);
  margin-top: 0px;
  font-family: 'Lato', serif;
  font-weight: 400;
  font-size: 22px;
}

See the results here

Use a parent container

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#parent {
  position: relative;
  height: 100%;
  width: 100%;
}

#mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(https://encrypted-tbn2.gstatic./images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg);
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

#content {
  position: relative;
  width: 50%;
  height: 50%;
  background: url(https://encrypted-tbn0.gstatic./images?q=tbn:ANd9GcRney6jjMJ8ZrRKwPb9MNDi7dvF1OLFC78ZpT8Th43WaNnJQV263Q);
  background-size: cover;
  top: 50%;
  left: 50%;
  border: solid white;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

<div id="parent">
  <div id="mask"></div>
  <div id="content"> This is some content</div>
  <div>