I want to have a separate background color below the svg and a separate background color above the svg.
Note that I have set the background Image for the body element and I will be using a grid layout above it with background-color set to transparent.

I have tried using solid linear gradients, as background color, but that would cover the svg image. I want the svg image to be at the top of the background color.

If it’s possible to set background-color as linear gradient like this. It would look similar to the result I’m hoping for

body {
  background-color: linear-gradient(
    to bottom,
    var(--color-background-primary-light) 0%,
    var(--color-background-primary-light) 40%,
    var(--color-background-primary-dark) 40%,
    var(--color-background-primary-dark) 100%
  );
  background-image: url("/images/bg-curvy-desktop.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 30%;
}

This is the design I’m trying to recreate.