как установить фоновое изображение, которое полностью заполнено с помощью css

Question

Я пытаюсь установить фоновое изображение, которое должно занимать всю ширину экрана. В настоящее время оно покрывает только некоторые% полной ширины. Я использовал этот css

.curve-img-container {
  background-image: url("../src/bg-curvy-desktop.svg");
  background-size: cover;
  width: 100%;
  height: 200px;
}

это выглядит так ( см. В полноэкранном режиме) код песочницы ссылка

но это должно выглядеть так

вот мой код

https://codesandbox.io/s/affectionate-cartwright-pw2mq?file= /src/styles.css:157-174

Answer 1

Я пробовал с firefox

.curve-img-container {
background-image: url("../src/bg-curvy-desktop.svg");
width: 100%;
height: 200px;
background-repeat: round;
}