Archived topic
Overlapping container breaks when editing footer element
6 replies · Started by Alvin on May 4, 2022
Hi,
I am using Crypto as a base theme. I want to change the background of the footer's parent container, but as soon as I make certain changes (like bg image opacity), the overlap effect disappears.
I tried changing z-indexes (both for it and the content container above it), and playing around with the negative margin that creates the effect. But I cannot get it to overlap like it did prior to my changes to the background.
Any ideas?
Thanks,
Alvin
Update: Just realized this happens when the selector changes from Element to Pseudo-element, which appears to be required for bg image transparency to work. Is there any way to use bg img transparency while still keeping the overlap effect?
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Sure, added a link to the site in private info.
You'll notice the dark blue overlapping section in the footer (as designed in the template) is missing/cut off. The only change I made in the editor was changing the parent container's bg image opacity from 1 to 0.9.
Doing this automatically changed the selector to Pseudo Element; when I tried changing it back to Element, I got this notice:
As far as I can tell, the change to pseudo element seems to be what's preventing the overlap from working properly, but it is required in order to add transparency to the bg image
Try add this CSS:
.gb-container.gb-container-eae04a8a {
overflow: visible;
}Let me know :)
It worked, thanks Ying! I was about to design some new background images with the transparency baked in (so that I would not have to touch that opacity slider). But this fix adds a lot more flexibility. Thanks a ton!
You are welcome :)
