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:

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 ( to make pulled bg-image an actual part of CSS file instead of html param.


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.


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