How do I use a CMS image as a background image for a div or section? Is this possible within Webflow?
The div should be within a collection list or template page, then check the div settings in the right panel for an option to set dynamic background from a collection image field.
Look her at 16:40
Hello this is working fine. But is it possible to get the background image to cover? I mean fill out the browser in the width?
Thanks
Kim
Same question here. I canāt see an option to pick background image cover from cms.
set it like you normally would with a normal background image and just leave the placeholder icon imageā¦the placeholder wonāt replace your cms background image but the settings will stick.
Thank you.
After playing around Iāve noticed that there is āGet BG image from CMSā in Element settings (right panel). It overrides āImage & gradientā and now itās working as expected.
Before that I was trying to set container image in Style (right panel) ā āImage & gradientā.
Dude PLEASE show me where this is?!
I can see a āget media fromā¦ā that links the image as an image but no āget BG imageā¦ā
Would love some help w this.
For anyone still struggling with this the above advice is correct. You need to select the div or element you wish to draw the BG img into and then using the element settings panel set it to get BG img from collection.
Then youāll be able to adjust things like cover on the bg img as you normally would.
Itās detailed more recently here:
One thing I canāt seem to do which seems weird is to add a gradient on top of the image. This way I can have a bg image with a gradient on top added dynamically and then my content on top of that.
Kind of annoying that I canāt find a workaround.
If anyone has any suggestions please let me know!
Was this solved for you?
I think the possible workaround would be adding a div, making absolute positioned and then giving it a negative z index. Then we can pull the image from the CMS and can add gradient or overlay. right now itās not possible to set a bg image to a parent div or wrapper directly.
Thank You so much! This helped to solve this!
Here you go, this should help:
Apply Overlay to Background using Dynamic Style Settings? - Design help / General - Forum | Webflow
It took me awhile to figure this out, not super intuitive, but you can set this under the Element Settings panel in the right sidebar
In case, If anyone needs to make the bg cover or contain - after adding the dynamic bg from settings then just simply click plus icon to the background image section then you can change the image position or anything else.
This worked like a charm! Thanks!
this video is private
Ugh!!! Youāre brilliant!! Thank you! Been searching for how to do this forever!
THIS WORKED!!! It wasnāt very intuitive. I think it needs to be reworded.