How do I use a CMS image as a background image for a div or section?

Design help CMS
1

How do I use a CMS image as a background image for a div or section? Is this possible within Webflow?

2

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.

2 Likes
3

Look her at 16:40

2 Likes
4

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

5

Same question here. I canā€™t see an option to pick background image cover from cms.

6

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.

3 Likes
7

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ā€.

3 Likes
8

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.

1 Like
9

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!

5 Likes
10

Was this solved for you?

11

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.

12

Thank You so much! This helped to solve this!

13

Here you go, this should help:

Apply Overlay to Background using Dynamic Style Settings? - Design help / General - Forum | Webflow

14

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
Screen Shot 2022-03-15 at 5.27.08 PM

2 Likes
15

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.

image

1 Like
16

This worked like a charm! Thanks!

17

this video is private

18

Ugh!!! Youā€™re brilliant!! Thank you! Been searching for how to do this forever!

19

THIS WORKED!!! It wasnā€™t very intuitive. I think it needs to be reworded.