Webstudio
Log in

Join the Webstudio community

Updated last year

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.

DDirky Dirk
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...
J
D
O
13 comments
JJeremy
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
JJeremy
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
DDirky Dirk
@Jeremy that's actually probably a better way honestly because that way we can optimize the image loading
DDirky Dirk
guess I'm just lazy because I really don't want to create it for this swiper template lol
DDirky Dirk
maybe if you already have something setup I could copy pasta it into this
DDirky Dirk
i'll share what i have here in a bit so you can see what I'm doing
OOleg Isonen
yeah, bettre avoid background images
OOleg Isonen
they don't enjoy perf optimizations
OOleg Isonen
and regular images have now options like object position and object fit
OOleg Isonen
but also we should have a code input there just like with gradient
OOleg Isonen
and this should be able to bind variables too
OOleg Isonen
none of the style panel stuff has currently support for expressions, this is our next stage, these will work over css variables
DDirky Dirk
@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