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>

Answer 2

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

Answer 3

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.net/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.com/RRUe0Mo.png">
  <img class="child" src="http://i.imgur.com/RRUe0Mo.png">
</div>

Answer 4

Use a parent container

Add a background to the parent container

Place a div inside the parent container, this div will act a a mask. Add a filter blur property to the mask

Add another div inside the parent. This div will contain your content. Add a background image to this div and center this div using css transform

Snippet below

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

Upvotes: 0