Blurring part of background in a css background image cover

Question

I'm currently attempting to blur the background image behind a div that has content in it. The problem is, this is supposed to be for a responsive design, so I need to use the cover property on the background image of the bigger box. There seems to be no way for me to match the image in the box inside to the one behind. I've tried making the bigger box relative, but then overflow:hidden doesn't work anymore on the smaller box.

<div class="container">
  <div class="block">
    <div class="blur">

    </div>
    <div class="content">
      <h3>
       A bunch of stuff
      </h3>
      <p>
       This is supposed to be content.
      </p>
      <p>
       That the box will wrap around
      </p>
    </div>
  </div>
</div>

.container{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
}

.blur{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(10px);
}

.content{
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}

https://jsfiddle.net/hy0mvpec/30/

Most of the examples online I've seen either use some JS library, which in this case I don't want to use, fixed heights with absolute containers, or CSS properties that simply aren't implemented in modern browsers.

EDIT: Since people seem overly confused about what I want;

I want the background of the smaller box to be blurred. Most solutions seem to re-apply the background-image to the smaller box and try to have it match the bigger one so it seems like a seamless image.

I think the question should pertain more to making the background image seamless regardless of the size of the display.

No, I want the background of the block element to be blurred, but also match the image in the container element. The problem is, I use the background-position: cover property, because I don't want weird sizing problems in the image I'm using on some devices, which I need to use as this needs to be responsive. But due to that, I have no idea how to match the image in the smaller container. — Sefam, Jul 09 '18 at 22:08
No. I want the small box with the content in it to have its background blurred, but for the background to seem like it has one seamless image. — Sefam, Jul 09 '18 at 22:10
Sorry I dont understand what you are looking for. Can you share a solution you have found, even with JS. Just to understand the final result — Gerardo BLANCO, Jul 09 '18 at 22:13
This but without the fixed heights. https://codepen.io/anthonyadamski/pen/yJBpd — Sefam, Jul 09 '18 at 22:14
Thanks for the clarifying edit to your original post. I deleted my answer since I misunderstood the question and my solution does not apply to your situation. — A. Lamansky, Jul 09 '18 at 22:16

Jismon Thomas · Accepted Answer · 2018-07-09T22:16:41.877

Not sure if this is what your expected output: check the updated fiddle https://jsfiddle.net/nw3spoLz/

i have added scale on your blur div

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
    overflow: hidden;
}

.blur{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
    filter: blur(10px);
}

.container{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
    overflow: hidden;
}

.blur{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
    filter: blur(10px);
}

.content{
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}

<div class="container">
  <div class="block">
    <div class="blur">

    </div>
    <div class="content">
      <h3>
       A bunch of stuff
      </h3>
      <p>
       This is supposed to be content.
      </p>
      <p>
       That the box will wrap around
      </p>
    </div>
  </div>
</div>

That's the output I would expect, however, it just so happens that in this case, due to the image's format, that scaling up works perfectly on this one. I just posted this as an example. The image I'm working with, due to the proportions, I cannot scale up in such a way that it matches the bigger image perfectly because I cannot scale outside of 2 decimals. So it's either slightly too big or slightly too small. This also stops working as soon as I resize the display in a way that resizes the content. — Sefam, Jul 09 '18 at 22:18
If you can add your question with an image which has proportion same as the your original image, that would be the easier way to get your desired output. — Jismon Thomas, Jul 09 '18 at 22:22
I changed the OP image to one with a proportion that is the same as my original image. You'll see that the image is slightly off and that if you want it to be precise, you'd need to go for a scaling beyond 2 decimals. The other problem is that when you resize the viewport to a point where the proportions of the container changes, the image doesn't follow anymore. — Sefam, Jul 09 '18 at 22:32
Hi sefam, i just tried the same trick, seems like it is working, check here https://jsfiddle.net/s4at0omu/ — Jismon Thomas, Jul 09 '18 at 22:36

Blurring part of background in a css background image cover

1 Answers1