grid-like background

Hi Melvin,

This is not as simple as it looks like.
GeneratePress website also has the wire frame as background, you might want to check it out :)

The steps below will get you there, but there'll be a lot of other things need to be tweaked after these steps, you can give it a try:

1. Add a GeneareBlocks containerblock to a block element, give it 2 additional CSS classes: fixed-background, grid-background.

2. Choose hookas element type, choose before_headeras hook name, select location accordingly.

3. Add this CSS:

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
}
.grid-background:before {
    right: 50%;
}
.grid-background:after {
    left: 50%;
}
.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:after {
    border-right: 1px dashed rgba(111,111,111,.15);
}
.grid-background>.gb-inside-container {
    z-index: 1;
}
.fixed-background .gb-inside-container {
    height: 100%;
}
.grid-background:after, .grid-background:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: calc(1200px / 4);
}
@media (max-width: 1000px){
    .grid-background:after, .grid-background:before {
        width: 25%;
    }
}

4. Go to customizer > layout > Container, check what's the value ofContainer Width you set, replace the 1200pxin the above CSS with it.
Adding CSS: https://docs.generatepress.com/article/adding-css/

Hello Ying,

I have followed your great tutorial. However, as you've mentioned it is not that easy and there are lots of tweak to be made.

Would you be open to help me fine tuning this on my site?

IMO, everything on generatepress site should be replicable though a detailed tuto because your website follows all the trendy design standards which aren't offered on any of your templates.

All of us aren't WP developers.

Appreciate your help if possible. Please let me know and I will post my site and issues. Cheers, Adrien

Hi Adrien,

I've replied your new topic.

But I didn't realize that you want to have the wire background, is it the case?

You can reply me in your own topic :)

Dear Ying, I've create a topic here as requested: https://generatepress.com/forums/topic/wire-background-same-as-generatepress-site/

Appreciate your precious guidance.