-
Luca Cogo
Hi everyone,
I’m trying to add a parallax effect in a container, inside the homepage.
I read this topic https://generatepress.com/forums/topic/parallax-effect-using-generatepress-theme-and-generateblocks/ and I used that method but when I launch the page, I see only a blank background in the container.
How can I solve it? -
George
Hello. Do you have the GenerateBlocks plugin installed?
-
Luca Cogo
Hi, yes I have.
-
George
You need to add a background image and set ATTACHEMNT STYLE as
FIXED.
Click the three dots at the top right of the page and switch to Code editor. Copy the following code and paste it in your page. Switch back to Visual editor to view the block.

<!-- wp:generateblocks/element {"uniqueId":"1789d4c8","tagName":"div","styles":{"backgroundImage":"url(/wp-content/uploads/2021/07/technology.jpg)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","paddingTop":"14rem","paddingBottom":"14rem","backgroundAttachment":"fixed"},"css":".gb-element-1789d4c8{background-attachment:fixed;background-blend-mode:normal;background-image:url('/wp-content/uploads/2021/07/technology.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;padding-bottom:14rem;padding-top:14rem}"} --> <div class="gb-element-1789d4c8"><!-- wp:generateblocks/element {"uniqueId":"b8624c98","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto"},"css":".gb-element-b8624c98{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}"} --> <div class="gb-element-b8624c98"><!-- wp:generateblocks/text {"uniqueId":"278b26ac","tagName":"p","styles":{"textAlign":"center","backgroundColor":"var(\u002d\u002dbase-3)","paddingTop":"2rem","paddingRight":"2rem","paddingBottom":"2rem","paddingLeft":"2rem"},"css":".gb-text-278b26ac{background-color:var(\u002d\u002dbase-3);text-align:center;padding:2rem}"} --> <p class="gb-text gb-text-278b26ac">Content could go here...</p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --> -
Luca Cogo
It works, thanks!
-
George
No problem!
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.