Archived topic
Container Dynamic Background Images
7 replies · Started by Tim Taricco on December 15, 2021
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.
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 :)
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.
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 :)
Thanks again for the help 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 :)
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.
Awesome! Glad it works :P
