How to set fallback image for background of section?

Hello, I want to use dynamic data to populate the background of a section. If no image is found, then I would like a fallback image displayed.

At the moment I can’t see how is can be done other than having multiple sections and swapping them out conditionally, but that seems very overkill.

I see that Bricks has recently added “sources” to default image elements, but that’s not helpful in my case, as this is the background of a section.

Thanks for your help!

1 Like

Hi! As far as I know this isn’t possible at the moment, but you can style the section that should get the background image and the image element to get the look you want. You’d need position: relative on the section, then position: absolute on the image with top: 0 and left: 0 as well as width: 100% and height: 100%. Also adjust the z-index and DOM position of the image to make sure the text is visible on top.

Hey guys,

you can use the relatively new @fallback-image option (see academy article).

{featured_image @fallback-image:80}

In this example 80 is the ID of the fallback image.

CleanShot 2024-09-07 at 16.02.27

Best,

André

2 Likes