Streaming live at 10am (PST)

The new overlay feature to work on sections with BG image on template pages

On one of my CMS template pages ("Objekt-page) I have a section with an background image pulled from database.
I try to add an overlay color via the new overlay button but it won’t display. In this instance, there’s suppose to be a blue color overlaying the image.

There’s 2 issues with it:

  1. Color overlay won’t display at all.
  2. Once the color overlay is set, it disables any settings in the BG-properties. I can’t make the BG fixed, tiled or any other setting.

See screenshot below. Here’s a preview-link: https://preview.webflow.com/preview/rosfast?preview=3723aacb61b900f9c494b1cd1613e240

It works fine on non-CMS pages though but it would be cool to have it work on section on dynamic pages too!

1 Like

Whatever you set up in Styles Panel is an actual CSS. So you have a

.node {
  background-image: ...; // all the settings are in here including overlay
}

Then, when you pull a background-image from a CMS it is actually adding a parameter to html node:

<div class="node" style="background-image: { ... };"> ... </div>

HTML works in a way, where style param for html node is ON TOP of the css, which means it overwrites that. There is also a warning about that:

I understand that this is frustrating, but since this is not a bug I can only ask you to write a post in Wish List category (http://forum.webflow.com/c/wish-list) to make pulled bg-image an actual part of CSS file instead of html param.

Cheers,
Bart

Ah, allright! That was something out of my knowledge but it’s always nice to learn something new…wether it’s good or bad…:slight_smile:

@StevenP What you will have to do is absolute position a custom div block with an overlay color over the dynamic background image.

2 Likes

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