CMS background image settings (Cover)

[okino (Malin Kullberg)]

Hi hello fellow webflowers,

How can I use the same settings for CMS BG images as for other BG images (not CMS)? Such as cover, no-repeat and so on. Thankful for any help.

This is how it looks, but not for CMS background images:

/M Okino

---

Here is my public share link: http://delta-studios.webflow.io/
Here is my shared Read-only link: https://preview.webflow.com/preview/delta-studios?preview=7f53e78619517a7d60e5c3bd7a300d22

[bbrazis (Bradley Brazis)]

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.

Like so:

That should fix your problem.

[okino (Malin Kullberg)]

@bbrazis OMG – too easy to figure out thanks a lot! Worked like a charm

[Lux (Luke Dorny)]

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:

1. When an image takes a split second to load, the placeholder image inside webflow shows first, looking a bit too unprofessional.

2. Photos that are semi-transparent reveal the placeholder image, too.

Anyone have a solutions?

[bbrazis (Bradley Brazis)]

You could try custom code it over in the head of your page

<style> .collectionbg { background-size: cover; background-repeat: no-repeat;} </style>

[Lux (Luke Dorny)]

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.

.cmsbg { background-size: cover; background-position: 50%; background-repeat: no-repeat;}

[Lux (Luke Dorny)]

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.

[Varcan (Sebastian Maj)]

Could you create a simple tutorial of this?, I’m having trouble with it.