I've mocked up a design in XD where I've got a curved background for the header (in the mock it's grey but in the code, I made it black so it's easier to view):
Here's the svg itself:
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="731.053" viewBox="0 0 1920 731.053">
<path id="background" data-name="background" d="M0,700.57s163.019,19.818,769.812,24.772c151.092,1.234,516.64-1.558,657.51-9.909C1848.848,690.447,1920,675.8,1920,675.8V-5.432H0Z" transform="translate(0 5.432)" fill="#000000"/>
</svg>
Ideally, I'd have it in the CSS as the background of the header and not as an HTML img (unless people think it's better otherwise ofc). The goal is to have it responsive with a dynamic with (100%) and a fixed height (so it doesn't shrink with the page rescaling).
I've truly have tried countless combinations but always keep ending up with something wrong(the background is not scaling properly, the background is placed in the middle even with background-position, the height changes on scale even though it's set to be fixed, etc...)
CSS:
header {
background-image: url('../assets/background.svg');
width: 100%;
height: 500px; // or vh
background-size: 100% 100%; // cover just doesn't do it for me
}
