Docs

[Jeroen]

Hi there,

I used this code to make an color-overlay for a section:

.x-section.color-overlay {
    position: relative;
}

.x-section.color-overlay:before {
    content: '';
    background: rgba(0, 58, 140, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
}
.x-section.color-overlay .x-container {
    position: relative;
    z-index: 10;
}

I want the color-overlay, but not in the front when i use a negative margin.

Negative margin example with color-overlay: http://prntscr.com/eg2g41

Negative margin example without color-overlay: http://prntscr.com/eg2gg4

Is there a simple change of this code possible?

Thanks a lot!

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, you need to adjust the z-index of the section that is in conflict with your color overlay. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Hope this helps. Kindly let us know.

[Jeroen]

This reply has been marked as private.

[Rupok]

Hi there,

Can you point us how we could replicate your issue? I have tried adding negative margin to the section but it doesn’t look like your screenshot rather create a gap. Where are you adding the negative margin?

Let us know .

[Jeroen]

This reply has been marked as private.

[Nico]

Hi There,

The best way to do it now is to add the blue overlay in the image directly. Re-edit the image of your background image then add the blue bakcground with the image.

Let us know how it goes

Thanks.

[Author]

Posts