NO BUG: Problem setting a dynamic background image on a <div>

[Rarefield720]

Hello everyone,

When I try to set a background image on a div using dynamic data ({featured_image}), the image does not display. However, if I use the same dynamic data in an image element (img), the image loads correctly.

I have deactivated the Advanced Themer plugin and Motion Page in case it could be generating some conflict, and I have also purged the cache several times, but it has not been solved.

Additionally, the dynamic data for the featured image comes from a Custom Post Type (CPT) called “Proyectos,” and I’m not sure if that has anything to do with why it’s not working correctly.

Any insights would be greatly appreciated.

Thanks!

[Illarion]

Set it outside a class

[Matej]

Hi @Rarefield720,

just like @Illarion mentioned, please try to add {featured_image} to the ID level. The image will be different for each post, so it does not make sense to have it on CSS

Let us know if that will work.

Thanks.
Matej

[Rarefield720]

Effectively, applying the background without the class on works.

Thank you very much for the help @Illarion and @Matej .

[Matej]

Perfect, I’ll mark the topic as NO BUG then

[Tar]

I have the same problem when trying to apply a background image to a div, with ::before selector active.

If I select a background image from the media gallery manually - it shows. If I use {featured_image} - it doesn’t show up as div background.

Manual image result:

Featured image result: (does not show up as div background)

[Illarion]

And like the original post, you can’t use dynamic data in CSS directly. Class is a static set of rules.

Try to use variables. Set your Background-image with var(--bg) and on div element add an attribute style with value --bg: url({featured_image}); or maybe --bg: url({featured_image:url}); (wordpress store FI as post ids if I remember correctly)