Archived topic
Hero header of generatepress website
3 replies · Started by Adrien on March 5, 2022
Dear Team,
Could you please give me a detail tuto on how did you do on GP website hero welcome page to display a container with a background image under the main two columns grids and the mobile image.
While studying you code I saw this but im unable to replicate:
.gb-container.background-right:before {
left: 42%;
width: 100vw;
max-width: 900px;
background-size: 100%;
background-position: center bottom;
}
@media (min-width: 1025px)
.gb-container-e4e1973e:before {
content: "";
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url(https://generatepress.com/wp-content/uploads/2021/04/home-hero-background.png);
background-size: 50vw;
background-position: right bottom;
background-repeat: no-repeat;
background-attachment: scroll;
}
IMO, everything on generatepress site should be replicable through a detailed tuto because your website follows all the trendy design standards which aren’t offered on any of your templates.
Appreciate your assistance. Kind regards, Adrien
Hi Adrien,
The layout can be easily replicated using GenerateBlocks.
The structure would be:
- Container (has an a background image and additional CSS class: background-right)
-Grid
- Container
- Headline blocks
- Container ( using CSS to hide it on mobile)
- Image block (the mobile phone image)Then you can add this CSS to your site to position the background image of the parent container:
.gb-container.background-right:before {
left: 42%;
width: 100vw;
max-width: 900px;
background-size: 100%;
background-position: center bottom;
}Dear Ying,
Thank you so much for your precious help. You are an amazing skilled teacher!
another 10/10 for GP/GB team. Kind regards, Adrien
Glad to hear that :)
You are very welcome!
