Color section background image

let it shortly open :
you can give a container more than one background-image

you can have here a look to what is possible ( it works with color-section too) : https://webers-testseite.de/multiple-background-images/

so you can do it via css to have the whole color-section a gradient and on top ( no-repeat) your 5-colored small line ( without the violett on the bottom) and set this image to contain !

I will give you a demonstration: https://webers-testseite.de/multiple-background-images/

on the bottom there is your color-section – if you shrink the window size you see that the small image with the colored fields is responsive and not cut of all color fields are seen !
the gradient is the other thing as described in the test page.
code for that colorsection (got id = confiance)

#confiance {
 background-image: url(/wp-content/uploads/bandeau_1920.jpg ) , -webkit-linear-gradient(left, rgb(88,87,90) 0%, rgb(110,99,140) 100%); !important;
 background-image: url(/wp-content/uploads/bandeau_1920.jpg ) , linear-gradient(to right, rgb(88,87,90) 0%, rgb(110,99,140) 100%) !important;
 background-repeat: no-repeat;
 background-position: left top,  center center;
 background-size:  contain, cover ;
}

or even better to have for that image a width of 100% and a static height:

#confiance {
    background-image: url(/wp-content/uploads/bandeau_1920.jpg ) , -webkit-linear-gradient(left, rgb(88,87,90) 0%, rgb(110,99,140) 100%);
    background-image: url(/wp-content/uploads/bandeau_1920.jpg ) , linear-gradient(to right, rgb(88,87,90) 0%, rgb(110,99,140) 100%) !important;
    background-repeat: no-repeat;
    background-position: left top, center center;
    background-size: 100% 20px, cover;
}