[Resolved] Blur the backgrounds?

[Michael]

Is there any custom CSS I could use to blur the backgrounds? Also is there a way to randomise them?

[Leo]

Hi there,

Not quite sure what you mean by blur the background. Any examples?

Some of the background color has opacity which you can apply to the background image.

It would require some custom coding to randomize them unfortunately.

Let me know if this helps 🙂

[Michael]

Here’s some examples

https://www.sitepoint.com/25-wonderful-websites-with-blurred-backgrounds/

I know you can apply blur with CSS, so I was wondering how that would look with my background designs, brings the content into focus more.

[David]

Blurring the body background is not straight forward, as Blur is applied to the container and therefore it effects the content. The workaround is to create a pseudo element which contains the background image and that the blur is applied to:

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

body:before {
    content: "";
    position: absolute;
    background: url(image_url.jpg);
    background-size: cover;
    z-index: -1;
    height: 20%;
    width: 20%;
    -webkit-transform: scale(5);
    transform: scale(5);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

[Michael]

Oh yes !

Thanks David, there’s something extra I learned today, much appreciated.

[David]

You’re welcome Michael, Pseudo elements do come in very handy 😉

[Author]

Posts