Archived topic
Cover block or full with background-image
7 replies · Started by Sander on February 24, 2023
I was looking in the F&Q but can't find it. Sorry.
How do I get a background image like this site: https://www.ergo-doen.nl
(How do I achieve this? height:100vw? Or with a Gutenberg cover block?)
I hope you can help me.
Hi there,
i can't get that URL to open.... can you share another example ?
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Is there a 'GeneratePress way' to do this?
OK, i got that URL to open.
Try the following:
1. Create a new page.
1.1 Set the pages Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
2. Add to the page a GenerateBlocks Container Block.
2.1 In the Blocks setting -> Sizing
2.1.1 set the Height to 100vh
2.1.2 set the Width: to 100%
2.2 In the Blocks Layouts set the Display: Flex, Flex-Direction column, Align Items Center, Justify Content Center.
2.3 In the Blocks Background -> Add a Background image.
3. Now add any blocks you want inside that Container Block.
And if it concerns a landingpage then I use .page-id-xx to prevent the entire website from getting a Content Container that is set to Full Width...?
If you use the Content Container meta box in the editor see here:
https://docs.generatepress.com/article/content-container/
That will only apply to that one page.
Thanx David!
Nice plugin, GenerateBlocks... I will find some time to get to know it.
Greetings, from Amsterdam
You're welcome
