Side-blurred background image

[web148]

This code (from here)

<style>
 body {
  margin: 0;
  overflow: hidden;
 }

 .image-frame {
  width: 100vw;
  height: 100vh;
  position: relative;
 }

 .image-frame .blur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
 }

 .image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  
  /* blurring */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
 }
  div.c1 {background-image: url(https://picsum.photos/512/512)}
  </style>

 <div class="image-frame">
  <div class="blur c1"></div>
  <img src="https://picsum.photos/512/512" />
 </div>

works as expected, but I would use it as a whole webpage background (applying it to body element), and not a background of a single div.
How should I do?

[web148]

I guess that a solution could be use a blurred image as background of the html element and a non blurred image as background of the body element, with a body a given max-width.

[DaveMaxwell]

I’m confused. Why would you want to do something like this? Have a blurred background with a focused background on top of it with content on top of that, hiding the focused content…

I guess I’m not understanding what you’re trying to do…

[web148]

In a my website I have a background image too little to cover the whole window width. Therefore I had to stretch it out, deforming it a bit.
With a blur effect, I could both 1) keep the “natural” with of the background image and 2) cover the whole window size (with lateral blurred pieces of the background image).
I don’t know if it is clear (excuse for my poor English).

[DaveMaxwell]

You couldn’t just use cover in your css which resizes your image automatically to fill the space? Can you see that much of the background image to worry about deformation of it?

background-size: cover;

[web148]

some deformation there is…

EDIT

moreover, from an esthetic point of view it could be nice a blur effect (only for a small piece of the screen) .

[PaulOB]

Do you mean something like this demo I did for someone else on the forums a while ago.

Or maybe something like this:

[web148]

like the second one. I have to do some attempts if it could fit my need.

EDIT

I tried, but the image should be the background of the body, not an element.

[PaulOB]

You can just use :before and :after and no image at all.

You have to be careful when mixing background-size:cover and background-attachment fixed as it doesn’t work in mobile and the whole document gets covered not just the viewport. That’s why I use a fixed pseudo element instead to avoid that issue. I’m assuming that you did what the image fixed to the viewport as not 100% sure of your use case.

[web148]

Definitely better! Tomorrow I will do some other attempts.
Thank you very much.

[web148]

So far I have troubles with the content (divs) of body. The background is almost OK (with the blur effect almost as expected), but “foreground”, so far, no.