[Support request] Cover block or full with background-image

[Sander]

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.

[David]

Hi there,

i can’t get that URL to open…. can you share another example ?

[Sander]

https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Is there a ‘GeneratePress way’ to do this?

[David]

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.

[Sander]

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…?

[David]

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.

[Sander]

Thanx David!
Nice plugin, GenerateBlocks… I will find some time to get to know it.
Greetings, from Amsterdam

[David]

You’re welcome

[Author]

Posts