How can i put the background together in css

Solution 1:

Keep both images in the same col, then give row position: relative and 2 divs position: absolute, then you can change the top, right, bottom, left according to your needs.

<Row className="p-5">
            <Col sm={12} lg={6}>
            <div className={classes.blob}>
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        fill="#08BDBA"
                        d="M18.3,-12.9C32.5,-19.3,59.1,-29.2,70.8,-25.8C82.5,-22.4,79.3,-5.7,75,9.4C70.7,24.5,65.1,38.1,53.6,40.2C42.1,42.4,24.5,33.1,11.6,34.7C-1.3,36.2,-9.6,48.5,-16.6,49.6C-23.6,50.7,-29.4,40.6,-38,32.1C-46.6,23.6,-58.1,16.8,-56.4,9.8C-54.7,2.9,-39.8,-4.2,-34.8,-16.2C-29.8,-28.2,-34.8,-45,-30.6,-43.2C-26.5,-41.5,-13.2,-21.1,-5.6,-12.4C2,-3.6,4,-6.5,18.3,-12.9Z"
                        transform="translate(100 100)"
                    />
                </svg>
            </div>
            
                <Image
                    src="/images/heroanimation.gif"
                    alt="Image Show Max"
                    width={500}
                    height={500}
                />
            </Col>