Overlay darkness on background image does not work anymore

[rxrbxr]

Hello,

x-bnb-bg-overlay-gray class function does not work anymore after the update of both X Theme and cornerstone. I changed the X > Settings > User Preferences > Advance Mode : Set this to Always ON. It does not still work.

What can we do?

Thank you in advance.

[jade]

Hi Jamie,

Please update X to version 7.2.2 and Cornerstone to version 4.2.2 then make sure to clear your site’s cache.

Feel free to let us know how it goes.

Thank you.

[rxrbxr]

Hello Jade,

We have recently upgraded the version to version 4.2.1 for Cornerstone and 7.2.1 X theme. Is it possible to fix the problem without upgrading the X theme and Cornerstone?

Thank you in advance.

[nabeel]

Hey Jamie,

Instead of using a class I’d recommend you to native functionality of the theme. To add a dark overlay on a section’s background, simply add your background image to the Lower Layer:

Now In the Background Upper Layer select Color option and choose the color for the overlay:

Hope this helps!

[rxrbxr]

Hello Nabeel,

Is it possible to help me with the class instead because we have lots of places that we are using overlay class. So, it will be more efficient if we can have some adjustment on the class but not on the functionality.

Thank you in advance.

[jade]

Hi Jamie,

The class you used to target for the background overlay is x-bnb-bg-overlay which is not a class that comes native with X. I am not certain how your pages were set before and how the class was added but if the purpose of this is to add an opaque background color to the background image of the sections, try using the either of these selectors:

• .x-bg .x-bg-layer-lower-image
• .x-bg .x-bg-layer-upper-image

However, please note that these classes will only be available when you enable the advanced option of the background setting of the sections:

Hope this helps.