Bottom Separator not working over background image

[KimAnn]

Hello:

Here is my site: https://leadas.love/

I have a bottom separator on section 5 (there are a total of 6 sections).

It will not cover the background image in section 6.

Here is the section with the background image:
https://leadas.love/wp-content/uploads/2018/02/Screen-Shot-2018-02-18-at-12.02.24-PM.png

Here it is when I remove the background image (showing that the bottom separator is there just not going over the bg image):
https://leadas.love/wp-content/uploads/2018/02/Screen-Shot-2018-02-18-at-12.04.07-PM.png

This is what I am going for:
https://leadas.love/wp-content/uploads/2018/02/Screen-Shot-2018-02-18-at-12.04.51-PM.png

I was able to accomplish this in my top 2 sections, but it is not working with my bottom 2 sections.

Please advise.

[roshi10]

I’m having the same issue except mine is a little different…

My top separator is not transparent (nor can it be because then it just shows the top section’s background) so my fixed background (parallax effect) is being cut off by the section separator.

[rad]

Hi guys,

Thanks for writing in.

The separator is not currently working for images, it’ only applicable for solid colors. But there is a workaround, it’s by changing the z-index of the section where the separator is. And it can be done through small CSS.

Would you mind adding the separator and background images now and provide your site’s URL? So we could create the CSS from its current setup and position. Plus, you must not add the separator directly to the section where the background image is, add the separator to the section above it, and as Angle Out.

Thanks!

[KimAnn]

Sure- I added the photo and the separator…my separator is ANGLE IN because I want the look I showed you above in my last photo. It is added to the section above it, just ANGLE IN instead of ANGLE OUT.

My site URL is https://leadas.love/

[christopher]

Hi there,

Please kindly go to the section which you added the Angle In and add theangle class by clicking on the Customize tab:

Then kindly add the CSS code below to X > Launch > Options > CSS:

.theangle {
   z-index: 100;
}
.theangle .x-separator-bottom-angle-in {
    color: white !important;
}

Thank you.

[KimAnn]

Thanks but that did not work:
https://leadas.love/

Also i need the angle to be #fbfbfb not white.

Look forward to your reply.

[christopher]

Hi there,

You added the class to a wrong Section. Add it to a section before the one you already added. Also simply swap white with #fbfbfb in the code.

Thank you.

[KimAnn]

Sorry about that- added it to the right section. Still does not work.

[Joao]

Hi There,

Please provide your admin credentials so we can take a closer look on your setup.

Thanks!

[KimAnn]

Left login details in a secure note above.

[paul.r]

Hi,

You need to add this CSS Code in Cornerstone > CSS

.theangle {
   z-index: 100 !important;
}
.theangle .x-separator-bottom-angle-in {
    color: white !important;
}

Thanks

[KimAnn]

ahhhh- yes thank you!

[paul.r]

You’re welcome!