3 Layers with pictures

Hi Monika,

It is possible via some CSS code however we need a link to the page mentioned.
Also, add a Custom ID Attribute to the Color Section, so we can target it properly.

Best regards,
Nikko

Hi Monika,

Thanks for giving us admin access.
I have added this CSS code in Enfold > General Styling > Quick CSS, just replace the background image with the image of your choice:

#ueberlappung {
    background-position: center right 32% !important;
}

#ueberlappung:after {
    background-image: url(https://website.com/wp-content/uploads/2023/01/element.svg);
    background-repeat: no-repeat;
    background-position: center left;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

Please review your site.

Best regards,
Nikko

Hi Monika,

I have inspected the code and it seems that position: absolute was changed to position: fixed please use absolute positioning only as its context is the section unlike fixed which is the whole body.

Also try to change this code:

#ueberlappung {
    background-position: center right 32% !important;
}

to:

#ueberlappung {
    background-position: center right 32% !important;
    overflow: hidden;
}

I put thecode in the customizer, because there i can quickly see the changes i made.
Is there a difference?
Yes, the Quick CSS is stored in an external stylesheet (usually external css as cached and minified) while the customizer’s CSS is embedded which is not a separate file but stored in the html page itself.

Best regards,
Nikko

Hi Monika,

Absolute and Fixed positions are almost the same in that both of them are floating however they differ in the context where absolute position always positions itself to its closest parent that has a relative position, and fixed position always position itself relative to the viewport, that’s why it always shows up and not bounded by any elements.

Best regards,
Nikko