[Resolved] Blur the backgrounds?

Home Forums Support [Resolved] Blur the backgrounds?

Home Forums Support Blur the backgrounds?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #612625
    Michael

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

    GP Premium 1.6.2
    #612823
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #614251
    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.

    #614258
    David
    Staff
    Customer Support

    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);
    }
    #614651
    Michael

    Oh yes !

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

    #614685
    David
    Staff
    Customer Support

    You’re welcome Michael, Pseudo elements do come in very handy ๐Ÿ˜‰

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