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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-background-image-x-is-not-a-color-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Correct Examples

Use `background-color` for solid colors:

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

Use `background-image` only for images or gradients:

```html
<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:

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