SOLVED: Gradient overlay overwrites background image on %root% when CSS Sync is active

Bugs
1

Browser: Chrome 110
OS: Windows

When CSS Sync is enabled in Bricks, adding a gradient overlay to an element incorrectly applies the CSS to %root% instead of targeting a :before or :after pseudo-element. This effectively replaces the background-image property, completely removing any existing background image on the element. Notably, even if the user explicitly switches to the :before tab in the builder, the styles are still incorrectly applied to %root%.

Steps to Reproduce:

  1. Enable CSS Sync.

  2. Select an element and assign a background image to it.

  3. Attempt to add a gradient overlay (or switch to the :before tab and add the gradient).

Actual Behavior: The gradient CSS is applied directly to %root%, which overwrites the original background image URL and deletes the image altogether.

Expected Behavior: The gradient overlay should be applied to a pseudo-element (:before or :after), preserving the original background image on %root% so they can coexist. The only way to solve this is to desactivate the feature or write the css by hand.

3

Hi @grupoverko,

thank you for the report. I was able to replicate the issue and I’ve added it to our tracker. However, I was not able to replicate the issue by switching to :before pseudo selector, like you mention here:

Can you record a short video how to replicate this one?

Thank you,
Matej

4

We’ve addressed this in Bricks 2.4.2, now available as a one-click update in your WordPress Dashboard.

The fix covers the reproduced case where a gradient overlay replaced the root background image with CSS Sync active. The separate :before observation in this thread was not confirmed.

Please read the changelog entry before updating, and let us know if you experience any issues.