Styling the BG Image loaded from a Collection (cover, repeat, position, ...)

Hi,

I have a product page on my website where the background should be related to a certain product. This works really great with the new template pages in Webflow CMS. I can just get these from my collections.

However, I need to style these images to make sure they are centered, cover the whole page and are not repeated. This seemed to work by changing the background settings of that element (the body in my case). An example BG image is created when you change the settings but this isn’t visible in the editor or in preview. So far so good but when I publish the site the example BG Image is shown…

Can anyone help me out with this? Maybe there is another way to do this?

Thanks!

Hello @BdG,
I would suggest to do this on static element first, remember (write down) measurements and apply it on dynamic background

Cheers,
Anna

It may be happening because it’s applied to the body element? I’d try wrapping all of your content in a section or a div, and applying it to that rather than the body.

1 Like

Thanks @sabanna, but where can I change the styling for a dynamic element? If I do this with the styling panel an example bg is always created to apply these settings.

@tomjohn Yes! Wonderful, this seems to work. Do you have any idea why this occurs when used in the body?

Not really, but I’ve found that keeping the styling of the body to a minimum really helps. I really only put in my base font styling (I use all EMs) in the body as well as a global background color. Anticipating anything else would be too much in my opinion.

I think there’s a tendency with webflow to want to put as much styling as possible in each class, but I’ve found that having root classes that only have a few styles and then applying ‘modifier’ classes as needed really helps keeping things clean.

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.