CSS: “background-image”: X is not a “color” value.

A CSS color value (like a hex code or color name) was used where a background-image value is expected, or vice versa — the background-image property only accepts image functions such as url() or gradient functions, not plain color values.

The background-image property is specifically designed for setting images or gradients as backgrounds. If you want to set a solid background color, use the background-color property instead. Alternatively, you can use the shorthand background property, which accepts both colors and images.

This error often occurs when using the background shorthand incorrectly or when accidentally assigning a color value directly to background-image in inline styles.

Incorrect Example

<div style="background-image: #ff0000;">
  This will trigger a validation error.
</div>

Correct Examples

Use background-color for solid colors:

<div style="background-color: #ff0000;">
  Using background-color for a solid color.
</div>

Use background-image only for images or gradients:

<div style="background-image: url('banner.jpg');">
  Using background-image with a URL.
</div>

<div style="background-image: linear-gradient(to right, #ff0000, #0000ff);">
  Using background-image with a gradient.
</div>

Or use the background shorthand, which accepts both:

<div style="background: #ff0000 url('banner.jpg') no-repeat center;">
  Using the background shorthand.
</div>

Learn more:

MDN Reference

CSS background-image property

→

MDN Reference

CSS background shorthand property

→

MDN Reference

CSS color values

→