[Support request] Body Background Blur Filter

Home Forums Support Body Background Blur Filter

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #298873
    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

    GP Premium 1.2.96
    #299010
    Tom
    Lead Developer
    Lead Developer

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.