How to insert a custom PNG as section divider

and if your … dourleur-chronique image is again with transparency – you can define a background-color on the end:
example code with my page-id

.page-id-30559 .three-bg-images {
    background-image: 
		url('https://webers-testseite.de/wp-content/uploads/double-wabe-bot.png'),
		url('https://webers-testseite.de/wp-content/uploads/bandeau_1920.jpg') ,
		url('https://webers-testseite.de/wp-content/uploads/clinique-transparent.png'), 
		linear-gradient(45deg, #1e5799 0%,#7db9e8 100%);
    background-repeat: no-repeat;
    background-position: left bottom,left top,center center, left top;
    background-size: contain,100% 20px,cover, 100vw 100%;
}

yes – but this additional information would not have been bad to know at the beginning.

So best would be to use the normal Enfold Background-Image Insertion by the ALB Element itself – and then bring some dividers on top f.e. by custom class.

This will be best – by handling svgs inserted by a custom class of the color-section to the right place in the dom
This might be the best place for it: https://kriesi.at/support/topic/curved-section-dividers/#post-1212353
If you do it the right way – even animated svgs could be inserted: see the bottom of that page: https://webers-testseite.de/pureinstall/fullwidth-slider/

A littel help is here: https://kriesi.at/support/topic/diagonal-border-angle/#post-1138048

but this will be more a tutorial here then a little help.
Get familiar with svg and and … sorry to much to say here .

if it is this way – that your customer like to change on the alb the background-image of color-section/slider etc. This could not be done by css only.
These images (svgs) had to be injected as additional elements as inline-svgs via child-theme functions.php
hint:
$(‘.avia-section.divider.top1’).prepend(‘<svg class=”top” ……… preserveAspectRatio=”none”></svg>’);
$(‘.avia-section.divider.bottom1’).append(‘<svg class=”bottom” ……… preserveAspectRatio=”none”></svg>’);

the divider class indicates that there will be dividers – and it is for preparing the color-section ( display : relative not static )
and if i give then in addition a custom-class: top1 to the color-section it will prepend that svg to it and if the custom class is bottom1 it will append.
in this way:

<div class="avia-section  …
  <svg  (  inline for the top ) </svg>
     <div class="container">… </div>
   <svg  ( inline  for the bottom ) </svg>
</div>

look to that link: https://kriesi.at/support/topic/diagonal-border-angle/#post-1138144
the rest is css positioning

see doku of Enfold: https://kriesi.at/documentation/enfold/svg-dividers/
and look with developer tools to it:

One thing is to mention – the svgs had to be well prepared to insert them in this way.