Multiple background images keeps moving when changing viewport width

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

I’ve tried background – attachment equal fixed & scroll and the clamp( ) method to keep them fixed