I am looking to create a distinctive background design with different colors above and below an svg image. I have set a background image for the body element and will be using a grid layout with a transparent background color above it.
My challenge is finding a way to add background colors without covering the svg image. I want the svg image to remain visible at the top of the colored backgrounds.
https://i.sstatic.net/531WPSUH.png
If there is a method to use linear gradients for the background color like shown here, it would achieve the look I desire:
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%;
}
https://i.sstatic.net/trAqiPNym.jpg
This is the specific design I am aiming to replicate in my project.