Join the Webstudio community

Updated 8 months ago

Create a dynamic background image

At a glance

The post provides instructions on how to set a dynamic background image using the "style" attribute. However, a community member encountered an error when trying to use this approach, as the "style" attribute is forbidden in React due to its special object format.

The comments discuss alternative solutions, such as using the Image component, which can be optimized for the screen. A community member suggests that the Image component is a better approach than using a background image, as background images cannot be optimized.

The comments indicate that the community member was able to find a solution using the Image component, but they are not sure why it is better than using a background image.

Settings > Properties > +

Create 'style' and set the value as a dynamic value (purple circle) and set "background-image: url(" + 'Collection Item'.field.image_url + ")"

(or whatever the route to your image is)
Attachment
image.png
M
B
8 comments
Hi! I need to add a background image which comes from my CMS. I know it's not possible to add a background image who comes from directly from the CMS right now, so I'd like to use the Samuel solution with "style" attributes.

I've got an error, it's seems not possible to add "style" to attributes right now. Am I wrong @TrySound? Something change?
Style attribute is forbidden because react has special object format for it.
What is your use case and why Image component does not work there?
Background image cannot be optimized so Image is more preferred.
I'd like to add bg image here (but images comes from CMS)
Attachment
SCR-20240814-lhaq.png
I don't know if it's complex but I think it would be great to add image there (when I'm watching discussions on this Discord, I'm not the only one)
General recommendation is to use absolutely positioned Image component which would work like background but also can be optimized for your screen
All right it works. Thanks Bogdan! Technically speaking, I'm not sure to understand and why it's better than background-image... but it works!
Add a reply
Sign up and join the conversation on Discord