color section transparent over another color section

First: See here a quick takeover of your logo as svg separators – these are set as patterns, so they are not responsive – but fill the entire width with this pattern unit. On element (color section – or column) you can set a height for them. And of course the fill color.

https://webers-testseite.de/bildvergleich/

Second: have a look at this: https://webers-testseite.de/donkey/
The problem with background-attachment: fixed is that a lot of mobile devices do not support it well. So Enfold decided to switch for mobile devices to background-attachment : scroll.

One trick was to use the background-attachment: scroll from the beginning setup. We can make then a pseudo-container (before or after anyway) that inherited background-image. Because it is now a seperated container we can set it to position : fixed
We then add a clip path to the actual color section so that the inheriting pseudo-container is only displayed below the parent section.
This is well supported by all browsers and mobile devices. etc. – follow the link above.

All is ruled by a custom class for the color-section.

PS: that post is from 2020 – so it might be that inset (0 0 0 0) works now on all browsers for the clip-path. That is much easier to understand and to write down in css code.

But: it will be hard to style with two background-images … i’m afraid we’ll have to go back to your previous solution.

Have a look if this could be a working solution for you – then i will start to explain how:
https://webers-testseite.de/substrato/

The first color-section : got custom class: bg-fixed
this color-section got the one background-image: substrato_background_page_top – but set it to scroll (background-attachment)
this is for quick css ( maybe we had to adjust later on – please activate that example page again):

.bg-fixed {
  background-size: 0px !important;
  overflow: hidden;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: inherit !important;
  background-size: cover;
  background-position: inherit;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1 !important;
  pointer-events: none;
}

Now for the following color-section ( just for that bg-image) with the substrato_separatore.png – that image is 265px heigh –
On Layout Tab : set section height to “Miniumum custom height in px ” to 265px
Open “Margin and Padding” Tab : check “Custom Margins” and enter -260px (Top and Bottom) – this will shift the section to top.
On Styling Tab – “Custom Background Color” and set the slider on the right to minimum (0.01) that is defacto : transparent
Background Image – now your separator – set to scroll – Bottom Center and repeat-x
on Advanced Tab : set a higher z-Index e.g. 2 – and give (if needed) a custom class to that section f.e. shifted-bg

If you got this we will look what to adjust then.
maybe this might be necessary:

#top .bg-fixed ,
#top .shifted-bg {
  position: relative;
}