This is how you do it, taking the example right from the screenshot you posted
background: var(--color-darkblue);
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
notice that in the example they have set variables with color at the beginning at the root level
:root {
--color-white: #f3f3f3;
--color-darkblue: #1b1b32;
--color-darkblue-alpha: rgba(27, 27, 50, 0.8);
--color-green: #37af65;
}
you will have to modify these values to the rgb color of your liking and the “a” in rgba is the alpha, or the transparency of the color or background. For example, rgba(27, 27, 50, 0.8); the first three decimal values will give you some red, green and blue, and the float value will give you the alpha value.
The Url in the code above will give you the background image with the layer of color set on top specified by the rgba color on top.
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
once you change that, you will get what you are looking for.