[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
  • #612625

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


    Here’s some examples


    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.

    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);

    Oh yes !

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

    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.