Having an image element on top of a bottom (or top) separator

[NMWeb]

I have a section with a background image, and a section above it that I’ve applied a curve out bottom separator to. It was easy to get the bottom separator to show on top of the background image of the section below by simply increasing the z-index of the top section. So far so good.

Where I’m having trouble is that I have an image element in the lower section that I’d like to have to show on top of the bottom separator. No matter what I do with the z-index of the columns, rows, or sections I can’t get the image to be on top.

Here is a screenshot:

I’ve found this prior post that seems directly applicable but it doesn’t explain how to get the image element to show on top of the separator.

Is there an easy CSS or configuration setting fix for this that I’m simply overlooking?

[ruenel]

Hello @MediaDeskNM,

Thanks for writing in!

The z-indexes will only work within sections. It cannot affect the z-indexes of the elements inside in each sections. Once the z-index of the section is lower than the other section, all elements in that section will always be behind the other section. With this, it is impossible to accomplish what you have in mind. You can only have this:

It may only be possible with custom modifications and restructuring of the separator elements. Be advised that custom modifications is way beyond the scope of our support.

Thank you for your understanding.

[NMWeb]

Thanks for the explanation!

I’ve devised a work around; I’ve added a transparent png file with a curved shape emulating the separator and inserted it into the section as an upper layer so it sits above the background image which is set at the lower layer.

[ruenel]

You are most welcome.
It’s also good to know that you have figured out a way to accomplish what you have in mind.