[Support request] Body Background Blur Filter

[Jan Schmidt]

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

[Tom]

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”.

[Author]

Posts