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 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;  ***/
}