How can I adjust the height of an element that has an SVG at the bottom to make it look good on all widths?

How can I adjust the height of an element that has an SVG at the bottom to make it look good on all widths?

I am trying to have a 'wave' effect at the bottom of my element that has a background-image in CSS, however I have made it work fine with height: auto; however I want the image's height to be bigger. However when I add a height, the SVG no longer sticks to the bottom of the element and sits a little above the bottom.

I'm new to SVGs so this is a bit of a headache to me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.svg-container {
    top: 100;
    left: 0;
    width: 100%;
    background-image: url('essex-builder-bathroom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    #visual {
        width: 100%;
        height: auto; 
        /* If set to a fixed value, eg 500px, it will cause it to not scale properly */
    }

<!-- language: lang-html -->

<div class="svg-container bg-primary">
    <svg id="visual" viewBox="0 0 3840 800" width="3840" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <path
        d="M0 551L91.5 557.5C183 564 366 577 548.8 573.8C731.7 570.7 914.3 551.3 1097.2 542.7C1280 534 1463 536 1645.8 538.3C1828.7 540.7 2011.3 543.3 2194.2 552C2377 560.7 2560 575.3 2742.8 584C2925.7 592.7 3108.3 595.3 3291.2 594.5C3474 593.7 3657 589.3 3748.5 587.2L3840 585L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#2c2b2b"></path>
    <path
        d="M0 654L91.5 657.3C183 660.7 366 667.3 548.8 668.7C731.7 670 914.3 666 1097.2 648.2C1280 630.3 1463 598.7 1645.8 585.7C1828.7 572.7 2011.3 578.3 2194.2 593.5C2377 608.7 2560 633.3 2742.8 643.5C2925.7 653.7 3108.3 649.3 3291.2 652C3474 654.7 3657 664.3 3748.5 669.2L3840 674L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#1a1919"></path>
    <path
        d="M0 716L91.5 711.8C183 707.7 366 699.3 548.8 689.2C731.7 679 914.3 667 1097.2 664.3C1280 661.7 1463 668.3 1645.8 670C1828.7 671.7 2011.3 668.3 2194.2 673.8C2377 679.3 2560 693.7 2742.8 695.5C2925.7 697.3 3108.3 686.7 3291.2 684.8C3474 683 3657 690 3748.5 693.5L3840 697L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#000000"></path>
    </svg>
</div>

<!-- end snippet -->

I have I have figured out what you were trying to achieve.

if you add the following attributes to your to the SVG html

preserveAspectRatio="none"

width="100vw"

height="100vh"

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  margin: 0;
  padding: 0;
}
.svg-container {
    position: relative;
    height: 100%;
    top: 100;
    left: 0;
    width: 100%;
    background-image: url('essex-builder-bathroom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<!-- language: lang-html -->

<div class="svg-container bg-primary">
    <svg 
         id="visual" 
         viewBox="0 0 3840 800" 
         preserveAspectRatio="none"
         width="100vw"
         height="100vh"
         xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <path
        d="M0 551L91.5 557.5C183 564 366 577 548.8 573.8C731.7 570.7 914.3 551.3 1097.2 542.7C1280 534 1463 536 1645.8 538.3C1828.7 540.7 2011.3 543.3 2194.2 552C2377 560.7 2560 575.3 2742.8 584C2925.7 592.7 3108.3 595.3 3291.2 594.5C3474 593.7 3657 589.3 3748.5 587.2L3840 585L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#2c2b2b"></path>
    <path
        d="M0 654L91.5 657.3C183 660.7 366 667.3 548.8 668.7C731.7 670 914.3 666 1097.2 648.2C1280 630.3 1463 598.7 1645.8 585.7C1828.7 572.7 2011.3 578.3 2194.2 593.5C2377 608.7 2560 633.3 2742.8 643.5C2925.7 653.7 3108.3 649.3 3291.2 652C3474 654.7 3657 664.3 3748.5 669.2L3840 674L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#1a1919"></path>
    <path
        d="M0 716L91.5 711.8C183 707.7 366 699.3 548.8 689.2C731.7 679 914.3 667 1097.2 664.3C1280 661.7 1463 668.3 1645.8 670C1828.7 671.7 2011.3 668.3 2194.2 673.8C2377 679.3 2560 693.7 2742.8 695.5C2925.7 697.3 3108.3 686.7 3291.2 684.8C3474 683 3657 690 3748.5 693.5L3840 697L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#000000"></path>
    </svg>
</div>

<!-- end snippet -->