.svg background-image stretches to cover the entire content area

Site URL: https://sealion-dogfish-x6kw.squarespace.com/

hello people!

I am trying that some of the sections (with different measures) have the same .svg background-image that adapts to each one of them (I don't mind it being deformed but I do need it to cover the whole background). I have tried with:

section:not(.has-background) .content-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns[...my .svg code...]");
    background-position: center;
    background-size: 100% 100%;
    background-attachment: scroll;
    background-repeat: no-repeat;
} 

but always maintains the same proportion... Any ideas?

my test-site: https://sealion-dogfish-x6kw.squarespace.com/

pass: *SomosBellas*

thanks in advance!!!

section:not(.has-background) .content-wrapper {
    background-image: url(data:image/svg+xml,%3Csvg xmlns[...my .svg code...]);
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

thanks @tuanphan!!! and some idea for the background to deform to fit the whole area???? 😐