Join the Webstudio community

Updated 10 months ago

Feature Request: Img src as background-image

At a glance

The post suggests that it would be beneficial to allow users to specify an image source, rather than just using an uploaded image for the background-image property. This would enable the use of images from APIs or existing image sources. Community members discuss this idea, with some suggesting it could be a useful feature and others noting that using regular images with object-position and object-fit properties may be a better approach than background images. The community members also discuss the potential for optimizing image loading and the need for a code input field to allow binding variables, similar to the gradient feature.

Currently, we must use an uploaded image for background-image property. I think it makes sense to give users the option to specify an image src, that way we can include images from API within collections or use images we already have uploaded to a bucket / CDN / etc...
Attachment
image.png
J
D
O
13 comments
Like this binding feature, but on the image field? That seems like a cool feature to ask for.
Attachment
CleanShot_2024-02-28_at_09.18.402x.png
I've been cheating this by using the image and absolutely placing it (then needing to adjust for accessibility, too). You can bind those sources.
Attachment
CleanShot_2024-02-28_at_09.21.022x.png
@Jeremy that's actually probably a better way honestly because that way we can optimize the image loading
guess I'm just lazy because I really don't want to create it for this swiper template lol
maybe if you already have something setup I could copy pasta it into this
i'll share what i have here in a bit so you can see what I'm doing
yeah, bettre avoid background images
they don't enjoy perf optimizations
and regular images have now options like object position and object fit
but also we should have a code input there just like with gradient
and this should be able to bind variables too
none of the style panel stuff has currently support for expressions, this is our next stage, these will work over css variables
@Oleg Isonen thanks, i always forget about object position / fit - guess I'm still old school with my thinking.
Add a reply
Sign up and join the conversation on Discord