[Resolved] Background image from a custom field in Divi specialty section

[Author]

Posts

[karlT-3]

Hello,

I am trying to use an image custom field ("blog-header-image) as the 'background image' in a Divi specialty section, but am not having much luck.

I have created a Custom Template in Toolset, with all other elements working correctly on the page. However, I cannot seem to call the "blog-header-image" custom field correctly using either the Divi Builder or Toolset's Content Template editor.

Any help would be greatly appreciated.

Thanks,
Karl.

[Christian Cox]

Hi, the best way I can think of to use a custom field image as a background image is to apply inline CSS directly to an HTML element. For example, in a Text module, you can do something like this in the Text tab:

<div style="background-image: url('{!{types field='blog-header-image' url='true' }!}{!{/types}!}');">
  This content will have the custom field background image.
</div>

[karlT-3]

Hi Christian,

Thank you for your reply.

I'm trying to put the image into the background of a "section module setting" - I can't put a text module here for the above code. The only options I have when inserting the background image for the Section is insert via URL or from the media library.

Cheers,
Karl.

[Christian Cox]

There's no easy way to add a dynamic CSS attributes to a module like this, because the Divi Builder doesn't support shortcodes or dynamic values in these inputs. Similarly, it is not possible to generate a dynamic CSS classname using shortcodes. Unfortunately these are limitations of Divi Builder that Toolset cannot fix. If it's essential to your site design, you can consider using multiple Content Templates, nested inside one another. Apply your dynamic CSS styles to a wrapper element and insert a nested Content Template containing Divi module design.

[karlT-3]

Thanks Christian - that makes sense! Appreciate the guidance.

Many thanks,
Karl.