What you should do is setup a background image on the element that you are going to have the CMS background image appear and set it up like you want. When the background image gets loaded it will overwrite the default background of the element and replace it with the CMS background image that you set up.
Okay, this post is the most similar to the question I have.
The only way to apply background-size: cover; and background-repeat: no-repeat to an elements background image (using the Get BG Image from COLLECTION… is this way.
That works fine.
However, this leaves two problems:
When an image takes a split second to load, the placeholder image inside webflow shows first, looking a bit too unprofessional.
Photos that are semi-transparent reveal the placeholder image, too.
Ahhhh. Then just add an extra class to DIVs in collection items that have CMS background images. Thanks!
Not bad. Not integrated, which would be easier to understand, plan for, and manage, but not bad.
My solution is to use a transparent gif as a placeholder images, which overwrites the default placeholder image (as seen in my image above with the X/BACKGROUND text, but then you’re able to use all of the properties of a reusable class elsewhere on your site.