.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!!!