Cascading Style Sheets (CSS) dictate that the background-color property is positioned at the bottom of the stack, with background-image layered on top of it. To mimic a solid color, one can utilize a linear-gradient().
body {
background-color: lightgray; /* this is painted at the bottom of the stack */
background-image: linear-gradient(black, black); /* this is painted over the background-color */
background-size: 50% 50%;
background-repeat: no-repeat;
}
Background-size exclusively functions in tandem with background-image, not background-color.
Moreover, as background-image has the capability to accommodate multiple values (separated by commas), there exists the option to layer numerous backgrounds as illustrated in this instance:
body {
background-color: blue;
background-image:
linear-gradient(lightgrey, lightgrey),
linear-gradient(black, black);
background-repeat: no-repeat;
background-size: 100% 50px;
background-position:
0 50px,
0 0;
}
Including another black background using linear-gradient() in the code, I positioned it atop the existing lightgray background. The final entry within the background-image property will occupy the uppermost position in the stack.
It is worth noting that background-position and background-size support multiple values. Each value corresponds to a respective background-image entry (signifying that the first background-position pertains to the first element within background-image, and so forth).
Feel free to experiment with this code here.