Is there a way to adjust the height of an element with an SVG at the bottom so that it looks good on all screen widths?
I'm attempting to create a 'wave' effect at the bottom of my element using a background-image in CSS. Although I managed to make it work with height: auto;, I would like to increase the height of the image. However, whenever I specify a fixed height, the SVG no longer aligns with the bottom of the element and is slightly offset.
As a newcomer to using SVGs, this is proving to be quite a challenge for me.
.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;
/* Setting a fixed value, e.g., 500px, causes scaling issues */
}<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>