[Resolved] Container Dynamic Background Images

[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.

[Ying]

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 🙂

[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.

[Ying]

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 🙂

[Tim Taricco]

Thanks again for the help Ying.

[Ying]

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 🙂

[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.

[Ying]

Awesome! Glad it works 😛

[Author]

Posts