This thread is resolved. Here is a description of the problem and solution.
Problem:
Set the featured image as background to a Divi module.
Solution:
Divi modules let you set a static background image (from the media library) but don't allow for dynamic image sources (coming from a custom field value). For that you would need to add a custom id to the element that will take the background, and then in a text (HTML) module add CSS that sets the background image of the element with that ID inside style tags, setting the url with a shortcode, as shown in the screenshot below: https://toolset.com/forums/topic/need-to-add-featured-image-as-a-backgroud/#post-1150575
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
| - | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
This topic contains 4 replies, has 2 voices.
Last updated by 6 years, 2 months ago.
Assisted by: Nigel.
When you add a Divi section and edit the settings for that section you can specify a background image. Shortcodes are not supported there, you can only insert static images from the media library.
If you go to the advanced tab you can set a custom ID for that section, and then you can create your own style rules that target that ID to add a background image using the CSS background property: hidden link
Now, normally adding custom CSS, you are limited to hard-coding the image URL, too.
Except you can add "dynamic" CSS by adding the CSS to a text module (which is actually an HTML module) inside style tags, something like you see in the screenshot.
Hi nigel,
I followed your steps, you have mentioned above. But I was not successful.
As mentioned I've made section class named "single_event_banner" and add this .css
.single_event_banner{
background: url('{!{wpv-post-featured-image size="full" output="url"}!}') !important;
}
Kindly see the attachment.
Thank you
