一个简单的弯曲的svg背景

Question

我在XD中模拟了一个设计，在该设计中我为标头设置了弯曲的背景（在模拟中为灰色，但是在代码中，我将其设为黑色，因此更易于查看）：

这是svg本身：

<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>

理想情况下，我会将其作为标题的背景而不是HTML img作为CSS的背景（除非人们认为这样做更好）。我们的目标是使它以100％的动态响应和固定的高度进行响应（因此它不会随着页面缩放而缩小）。

我确实尝试了无数种组合，但总是会以错误的方式结束（背景缩放不正确，即使背景位置位于背景的中间，即使设置为固定，等等...）

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
}