[Resolved] Container Dynamic Background Images

Home Forums Support [Resolved] Container Dynamic Background Images

Home Forums Support Container Dynamic Background Images

  • This topic has 7 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2050330
    Tim Taricco

    When using dynamic background images in a GenerateBlocks Container in an after_header Hook Element, does the Advanced Backgrounds feature not work? I’m trying to set up 2 dynamic background images pulling from ACF fields. This page https://authid.bwb2b.com/style-guide/ has a static version of the hero built on the page. This page https://authid.bwb2b.com/about/ uses the GeneratePress after_header Hook Element. The Hook Element doesn’t show the second image and there seems to be no way to set the second background image as a dynamic field.

    #2050471
    Ying
    Staff
    Customer Support

    Hi Tim,

    On the About page, there’re 2 background images assigned to the container block, the issue is the 2 images are the same.

    Can you make sure that you are assigning the correct images? Let me know πŸ™‚

    #2050484
    Tim Taricco

    Hi Ying. Thanks for the reply and thank you for pointing that out. I have just verified that I do NOT have the container set up to pull the same image twice. I have Advanced backgrounds activated and a specific image specified and that image is NOT showing on this page https://authid.bwb2b.com/about/ as it is on this page https://authid.bwb2b.com/style-guide/. The exact same image is specified for both. But that brings me also to my initial inquiry about having that second image dynamically populated.

    #2050504
    Ying
    Staff
    Customer Support

    Can you provide admin access using the private info field so I can take a look at the backend?

    And how did you set to make it pull image link from the custom field?

    Thanks πŸ™‚

    #2050510
    Tim Taricco

    Thanks again for the help Ying.

    #2050545
    Ying
    Staff
    Customer Support

    I see the issue.

    The 2 background images are both pulling the same link from the custom field.

    It’ll be very complicated to make the 2 background images pull different links.

    But I think there’s an easy workaround:

    1. Set the Container block to full width (both outside/inner), remove its paddings, set its background image to pull from the custom field.
    2. Add another Container block in the parent container block, set same min-height as the parent Container block. Set its background image to a static one (choose pseudo element), don’t activate the dynamic option.
    3. Add clip-path CSS to the child Container block’s background (pseudo element).

    Let me know if it works πŸ™‚

    #2050575
    Tim Taricco

    Bingo! You’re brilliant. Once you described the solution, I was like, “duh.” I just popped in another container and then moved my original container into that, then set the separate dynamic background images for each of those containers.

    #2050595
    Ying
    Staff
    Customer Support

    Awesome! Glad it works πŸ˜›

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