Combining background color and gradient in one background CSS attribute

Question

I\'d like to combine a solid color and a gradient in a single background CSS attribute. Then, I want these two backgrounds to have separate size and position parame

Answer 1

However, Chrome says the background property has an invalid value [...] I fail to understand why.

A color value can only appear in the last layer in an element with layered backgrounds, as stated in the spec. You are specifying a color in a layer other than the last, which renders your shorthand declaration invalid.

My current work-around, which I cannot believe to be really necessary here, is to wrap the solid color in a gradient with the same start and end color. Kind of ugly, and I am sure there is a simpler way...

There isn't. That's the only pure CSS workaround. You could instead opt for a Base64-encoded data URI representing a single red pixel, but either way, you're going to have to specify an image value if that solid color must overlap the gradient.