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?
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.
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!