fixed background-images?
Choose background-attachment : scroll for your color-section
give to that color-section a custom css class:
bg-fixed
then creating a pseudo-container :before ( or :after ) with position fixed. And inherit the most of the attributes of the color-section
Important : cut the bg-fixed container to its initial dimensions with clip-path : inset(0 0 0 0)
PS: inset is bad supported on position:fixed – so here is a clip-path polygon used
but even this is sometimes not working – thanks to iOS
.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;
/*** if more than one is handled - very performance intensive
will-change: transform; ***/
}