Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Parallax doesn’t work

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

  • Hello. Do you have the GenerateBlocks plugin installed?

  • Hi, yes I have.

  • You need to add a background image and set ATTACHEMNT STYLE as FIXED.

    Background image as Fixed attachement style

    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.

    Switching between Code and Visual editor

    <!-- 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 -->
  • It works, thanks!

  • No problem!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.