Bricks Version: 1.5.2 Browser: Chrome 105 [newest] OS: Windows URL: (a link to a page that illustrates the issue would be really helpful)
Really don’t know if it is a bug or if im just stupid.
After updating my bricks to 1.5.2 an area on my site was changed.
I got a background with a black gradient overlay.
Previously all elements on that section were the defined color [white] but now it seems like the gradient overlays my (new) elements as well and i can’t work around it.
But the strangest thing about this is… All my old elements are displayed different in the builder/preview and the site itself:
I reload the builder - everything seems fine and bright;
When i then hover over the elements or enter the preview - they turn dark;
& when i hold right-click in the builder or preview on any of those [new&old] elements - they get the actual defined color as long as im holding right-click.
Container has background image, set to overlay on background. It’s applying that background/overlay to the buttons, headings, text that is nested underneath that container too.
If i set the headings/text etc to “Apply to Text” the rendered version on the editor looks correct, but when i save and hard refresh the website, the bug is still there.
I’m also experiencing this issue on our header banners and hero sections. When trying to apply a gradient overlay to the background image, it also covers the title text and other elements. I had to manually set a z-index for the title text to prevent it from happening.
Edit: Now it’s working on my slider too. I had to nest all elements in one main div so I could z-index them all together. Don’t really know why z-indexing the single elements didn’t help but well… don’t really care anymore since it’s working now.
in fact it is working for me in other places too. Just not on my slider. Probably it’s because it’s nested differently…
Thanks for the screencast though! I had been looking for the same topic in the FB group but did not find it.
The inner elements need a relative position too since the overlay is absolutely positioned. Basically & technically, it’s not a bug. However, since we get tons of reports on this topic, in the next version we will introduce a helper class for the overlays that applies position: relative to all elements.
Has this been implemented sorry? I tried one earlier on Bricks 1.5.6 and it was still overlapping the text - I overcame it with custom css and using z-index:0 on the text bits.
It was and works for me: neither the container nor the elements inside have any setting. The .has-overlay class makes sure that all inner elements are set to position:relative so that they are above the overlay.
