Vertical grid background css.

Hi there,

the way GP does it is like so:

1. Create a new Hook Element ( in Appearance > Elements )

1.1 in the hook element content add:

<div class="fixed-background grid-background">
	<div class="gb-inside-container grid-container"></div>
</div>

1.2 Set the Hook to: generate_before_header

1.3 Set the Display Rules to the pages you want the grid lines applied to.

1.4 Publish the hook.

2. Add this CSS to your site:

body, html {
    overflow-x: hidden;
}
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index:1
}

.fixed-background .gb-inside-container {
    height:100%
}

.grid-background > .gb-inside-container {
    z-index:1
}

.gb-container:not(.grid-background) > .gb-inside-container, body:not(.full-width-content) .site-main {
    z-index: 2;
    position:relative
}

.grid-background:after, .grid-background:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width:calc(1200px / 4)
}

.grid-background:after {
    border-right:1px dashed rgba(111, 111, 111, .15)
}

.grid-background:before, .grid-background > .gb-inside-container {
    border-left: 1px dashed rgba(111, 111, 111, .15);
    border-right:1px dashed rgba(111, 111, 111, .15)
}

.grid-background:before {
    right:50%
}

.grid-background:after {
    left:50%
}

@media (max-width: 1000px) {
    .grid-background:after, .grid-background:before {
        width:25%
    }
}

It is very specific to the GP pages which were built with GenerateBlocks and a Full Width content container.
But the basic principle should work on any site.

Fantastic! Thank you.

For some reason, the Site title is not clickable on the pages this is implemented on. Any fix for this?

Change this:

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index:1
}

to:

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index:1;
    pointer-events: none;
}

Thanks for your help so far. At the moment the grid is visible everywhere seeping through the images and blocks as well.

Is there any way this grid can only be set as background? Just like we can set the background image on the container or full site?

Thanks for your help in advance.

Is there any way this grid can only be set as background? Just like we can set the background image on the container or full site?

It's kind of tricky, can you link us to your site so we can look for a solution?

Hi Ying,

Thanks for the reply.

I am attaching two URLs below. As you can see that the behavior is as expected in URL 1 where it stays as the background behind the images and blocks for example pricing block.

Whereas in URL 2. It is seeping through the images and pricing table.

Kind regards,

Ah it's because you are merging the header with the content using a header element, which adds z-index:10; to the header area. The background is added into that area, so it floats above the content.

You can try this CSS:

.header-wrap ~.site {
    position: relative;
    z-index: 11;
}

Perfect. Thank you so much for your help, David and Ying. Much appreciated.

No problem :)