[Support request] Container background opacity

[Colin]

Hi – site here: https://mosaicgardens.co

On my front page I have three call to action boxes under “Services”. They are a generateblocks grid. There is a background picture for each container set to about 60%-70% opacity.

On the live version of the site the background seems to be on top of the text. When I’m editing the page it looks normal, with the text on top of the background. This seemed to happen when I was changing the containers over to the new layout system.

This is what it looks like when editing

Thanks

[Fernando]

Hi Colin,

For reference, how specifically did you add the opacity?

[Colin]

Hey Fernando,
I used the the image opacity slider in the background dropdown menu.
See here:
https://photos.app.goo.gl/HhpfRFA77FJQKuQ4A
Thanks

[Fernando]

I see. Can you try increasing the z-index of all Blocks inside the Container? Try 100 or 1000.

Reference: https://docs.generateblocks.com/article/layout-options-overview/

[Colin]

Ok, that worked. I put everything into an inner container and set the z index to 1, which brought it above the parent container background image.

Thanks!

[Fernando]

I see. Good idea! Glad you solved it! You’re welcome, Colin!

[Author]

Posts