Colour section background image mobile responsive issue

I would not realize it with two color sections.
e.g. if you want to navigate to it using anchor link.

just create one color-section – give a unique ID to it ( f.e: myid ) and a custom-class : bg-fixed
this custom-class is for all those backgrounds the same only the ID should be unique.
and for your smaller screens set a css to your quick css to change the background images.
Set the background-image to scroll !!! to avoid the parallax extra container.

( PS: Google search on : background-attachment:fixed and mobile browsers – especially IOS ( iphone, ipad etc).

My solution to this problem circumvents the background-attachment : fixed by creating a pseudocontainer with a fixed position.:
This goes to quick css:

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

this also goes to the quick css:
now you only have to set for smaller screens a different background-image by using the unique ID:

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

see result: https://webers-testseite.de/donkey/

INFO: will-change usage

just create one color-section – give a unique ID to it ( f.e: myid ) and a custom-class : bg-fixed
there was a unique ID and a custom-class.

The background should be set to scroll

– this avoids the creating of an extra parallax container on mobile devices.
On inserting the custom-class to that input field do it without a dot infront.

The class is for creating that pseudo container and could be used for different color-sections even on one page.

The ID is only needed if you want to have different background-images for different screen-width.

the code above is not for the input filed on that alb.
It goes to the quick css from Enfold Options Dialog “General Styling”

It is described above and again in the second part:
Id and class,

and especially the background had to be set to scroll.

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

There is nothing more I can do than to give a detailed instruction and also show a working test page. If not read carefully, then unfortunately I cannot do more. I will only make instructional films if there is no other way to create clarity.

an additional setting is needed for safari browsers – that the text in content stayes selectable and clicks are all valid: pointer-events on the before container had to be set to none:

.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative;
  top: 0;
}

.bg-fixed:after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: inherit;
  pointer-events: none;
  z-index: -1;
  visibility: visible !important;
  /** will-change: transform;    - only if you have less then 3 images like that    ***/
}

PS: sometimes it is good to preserve an existing :before container – then you can use the after pseudo-container.