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

Design help General
1

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!

1815×884 473 KB

1 Like
2

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

3

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:

4

@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
5

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