Streaming live at 10am (PST)

Styling Background Images in CMS Collection Pages

Hi,

I am stuck trying to style the Hero Overlay in the CMS Collections pages.

From one CMS page to the next the hero images each need slight tweaks to their position so they appear correctly in the hero section. For example, making the following changes:

Backgrounds > Image > Position

I have tried changing, duplicating, and creating classes for each part of the hero section, including wrapping the hero section in a div, but the result is always the same: Changing the position of a background image of one page replicates the changes on the other change. (It also changes the assigned classes).

If anyone can provide some guidance here I would be grateful.

Many thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Yeah I think you’re just butting up against the layout limitations of Collection pages.
Best bet is to style/crop header images before upload as much as possible.

One thing you can do is have a few different switch options in your Collection settings, e.g Layout 1, Layout 2, Layout 3.
And then use Conditional Visibility https://university.webflow.com/article/conditional-visibility to show only the Layout that is switched on

But that’s likely gonna become impractical to manage if you want a unique layout for every post.

Locase -

Many thanks for your reply. It’s good to know I am not doing anything wrong.

I will amend my image preparation to account for the positing limitation.

Many thanks for guiding me in the right direction.
Best,

My question is similar, but has to do with image tiling on larger displays. Anyone figure out how to set those images to COVER?