Streaming live at 10am (PST)

[Ask] How to hide div if it's background image is none?

Hi everyone!
I’m very new to webflow community and starting to learn about the tools.

So, I’m designing a collection item that have a div that represent an image. I’m planning to inject the image url from other sources using HTML embed. Then I want to make a that div (which contain image via backrground-image url) disappear if there’s no url associated with it.

My question,
I’m not sure if this is possible to do in webflow or do I need to add additional logic as extra code? I considered not so good in coding, so if Anyone can help me walk through will be super nice.

Thank you tons!

Here is my public share link:

I’m following this step for injecting image url

@juragan welcome to the forum! What I’d do is use a switch field. That’s the easiest way to set up conditional visibility in some cases. So you’d add a switch field to your collection, switch it to ‘off’ for any item in your CMS that doesn’t contain the image. This is an article from the university explaining how to set that up
I’ve got to ask, why use a background image? Accessibility-wise it’s always best to have anything that provides context as an image and anything that’s just decoration as a background image.

Hi @sarahfrison, thank you for kind help!
Yes, I think what I need is switch-field, and an intro to conditional visibility?

There’s no particular reason I use bg image on a div instead of image. Can image behave the same as div in term of styling? If so, I def use image :grinning:

@juragan you’re welcome, that’s why we’re here :slight_smile: . Yes, images work pretty much the same as background images in a div, so use a regular instead. Here’s a link to the webflow university about interactions, specifically triggers like switches There’s loads more about interactions on the university but this should give you a good idea of where to start.