Archived topic

Body Background Blur Filter

1 reply · Started by Jan Schmidt on March 29, 2017

Viewing posts 1–2 of 2

March 29, 2017 at 5:29 am #298873

Hi,

it may sound simple but I'm not a CSS guy, so i need help.
I want to blur out the body background, it should work with a code like this:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

But i simply don't know how to trigger only the body background-image.
Thanks in advance for your help!

BTW: how do i get the new 1.3.46 Update for Generate Press?

Best regards,
Jan

March 29, 2017 at 10:22 am #299010

Hi there,

This might be a little tricky.

First, you would need to add an element into the "Before Header" hook in GP Hooks.

<div class="background-image"></div>

Then you would add this CSS:

.background-image {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url( 'URL TO YOUR IMAGE' );
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Most likely need to be tweaked as this is untested, but should be a solid start.

You can update GeneratePress in "Appearance > Themes".

This archived topic is closed to new replies.

Start building better websites today.