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

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

The `background` CSS property is a shorthand that can accept values for `background-color`, `background-image`, `background-position`, `background-size`, `background-repeat`, `background-origin`, `background-clip`, and `background-attachment`. When the validator encounters an unrecognized value, it tries to match it against individual sub-properties like `background-color`. If the value doesn't match any of them, you'll see this error.

Common causes include typos in color names (e.g., `bleu` instead of `blue`), malformed hex codes (e.g., `#gggggg` or a missing `#`), incorrect function syntax (e.g., `rgb(255 0 0` with a missing parenthesis), or using values that simply don't exist in CSS. This error can also appear when a CSS custom property (variable) is used in inline styles and the validator can't resolve it, or when a browser-specific value is used that isn't part of the CSS specification.

Fixing this issue ensures your styles render predictably across browsers. While browsers are often forgiving and may ignore invalid declarations silently, relying on that behavior can lead to inconsistent rendering. Standards-compliant CSS is easier to maintain and debug.

## How to Fix

1. **Check for typos** in color names, hex codes, or function syntax.
2. **Verify the value format** — hex colors need a `#` prefix, `rgb()` and `rgba()` need proper comma-separated or space-separated values with closing parentheses.
3. **Use `background-color`** instead of the shorthand `background` if you only intend to set a color. This makes your intent clearer and reduces the chance of conflicting shorthand values.
4. **Remove vendor-prefixed or non-standard values** that the validator doesn't recognize.

## Examples

### Incorrect — Typo in color name

```html
<div style="background: aquaa;">Content</div>
```

`aquaa` is not a valid CSS color name, so the validator rejects it.

### Correct — Valid color name

```html
<div style="background: aqua;">Content</div>
```

### Incorrect — Malformed hex code

```html
<div style="background: #xyz123;">Content</div>
```

Hex color codes only allow characters `0–9` and `a–f`.

### Correct — Valid hex code

```html
<div style="background: #00a123;">Content</div>
```

### Incorrect — Missing hash symbol

```html
<div style="background: ff0000;">Content</div>
```

Without the `#`, the validator interprets `ff0000` as an unknown keyword.

### Correct — Hex code with hash

```html
<div style="background: #ff0000;">Content</div>
```

### Incorrect — Broken `rgb()` syntax

```html
<div style="background: rgb(255, 0, 300);">Content</div>
```

RGB channel values must be between `0` and `255` (or `0%` to `100%`).

### Correct — Valid `rgb()` value

```html
<div style="background: rgb(255, 0, 128);">Content</div>
```

### Correct — Using `background-color` for clarity

When you only need to set a color, prefer the specific `background-color` property over the shorthand:

```html
<div style="background-color: rgba(255, 0, 0, 0.5);">Semi-transparent red</div>
```

### Correct — Valid shorthand with image and other properties

```html
<div style="background: url('image.jpg') no-repeat center / cover;">Content</div>
```

Note the `/` between `background-position` (`center`) and `background-size` (`cover`) — this is required syntax in the shorthand.