background-image svg scaling not working svelte

So I have multiple < p > elements inside a < div > which is inside an overall container. The container has an svg graphic as a background image with the top and bottom being wavy sides (so should not get cropped)

I've tried writting some JS to automatically scale the svg to 1) stretch the width of the screen and 2) stretch the vertical so all text is inside the svg.

This is in the OnMount function: (paraContainer is the overall container)

    function updateScale() {        const paraContainer = document.getElementById('introPara');        const style = window.getComputedStyle(paraContainer, "::before");        const backgroundImage = style.backgroundImage;        let imageUrl = backgroundImage.slice(5, -2);        let imgHeight = 0;        let imgWidth = 0;        const img = new Image();        img.onload = function () {            imgHeight = img.height;            imgWidth = img.width;            const containerHeight = paraContainer.offsetHeight;            const containerWidth = paraContainer.offsetWidth;            const scaleX = (containerWidth / imgWidth) * 2;            const scaleY = (containerHeight / imgHeight) * 1.2;            paraContainer.style.backgroundSize = `${scaleX * 100}% ${scaleY * 100}%`;        };        img.src = imageUrl;    }    window.addEventListener('resize', updateScale);    updateScale();

And this is my CSS:

.intro-para {    color: white !important;     padding: 2vw 5vw 2vw 5vw !important;    width: 100vw !important;    max-width: 100% !important;    position: relative;    display: flex;    align-items: center;    justify-content: center;    overflow-x: clip;}#introPara::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-image: url('../../static/SVG/Asset 8 pink.svg#svgView(preserveAspectRatio(none))');    background-size: contain;    background-position: center;    background-repeat: no-repeat;    z-index: -1;}

And then the HTML:

<div class="container intro-para" id="introPara"><div class="para-content" id="textContainer"><p>Text</p><p>Text</p><p>Text</p><p>Text</p></div></div>

However this does not scale the image, even tweaking the background-size % values in paraContainer's inspect element doesn't change anything. What've I done wrong here? Any help appreciated :)