Multiple background images moving when changing viewport width

Question

4 background images

At viewport width of 1440px, I've specified the background positions with the following percentage according to the body full height. When changing the viewport width due to designing responsive design website, The multiple background images keeps moving up and down , even though I've tried background - attachment equal fixed & scroll and the clamp( ) method to keep them fixed , It keeps moving , I've attached an image of how does it look like.

body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100%;
background-image: url(./huddle-landing-page-with-curved-sections-master/images/bg-section-top-desktop-1.svg),
    url(./huddle-landing-page-with-curved-sections-master/images/bg-section-bottom-desktop-1.svg),
    url(./huddle-landing-page-with-curved-sections-master/images/bg-section-top-desktop-2.svg),
    url(./huddle-landing-page-with-curved-sections-master/images/bg-section-bottom-desktop-2.svg),
    url(./huddle-landing-page-with-curved-sections-master/images/bg-footer-top-desktop.svg);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: center 34.2%, center 47.6%, center 63%, center 76%, center 87.8%;
background-size: contain;

}