# CSS: “background-image”: Parse Error.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-background-image-parse-error
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When the CSS parser encounters a `background-image` value it cannot understand, it flags a parse error. This doesn't necessarily mean the browser won't render your styles — browsers are often more forgiving than validators — but it does indicate that your CSS doesn't conform to the specification. Invalid CSS can lead to unpredictable rendering across different browsers, makes your code harder to maintain, and may cause styles to silently fail in certain environments.

Common causes of this error include:

- **Missing the `url()` function** around image paths.
- **Unquoted or improperly quoted URLs** containing special characters like spaces or parentheses.
- **Typos** in CSS function names (e.g., `lnear-gradient` instead of `linear-gradient`).
- **Using vendor-prefixed values** (e.g., `-webkit-linear-gradient`) in contexts where the validator expects standard CSS.
- **Invalid gradient syntax**, such as missing color stops, incorrect angle units, or malformed function arguments.
- **Using CSS custom properties (variables)** or newer syntax in a `style` attribute, which the validator's CSS parser may not fully support.

To fix this, review the exact `background-image` declaration the validator is pointing to. Make sure all URLs are wrapped in `url()`, all gradients use correct function names and valid arguments, and all strings are properly quoted and closed.

## Examples

### Missing `url()` function

A bare file path without the `url()` wrapper is invalid:

```html
<!-- ❌ Parse error: missing url() -->
<div style="background-image: /images/hero.jpg;"></div>
```

Wrap the path in `url()`:

```html
<!-- ✅ Correct -->
<div style="background-image: url('/images/hero.jpg');"></div>
```

### Typo in gradient function name

```html
<!-- ❌ Parse error: misspelled function -->
<div style="background-image: lnear-gradient(to right, red, blue);"></div>
```

```html
<!-- ✅ Correct -->
<div style="background-image: linear-gradient(to right, red, blue);"></div>
```

### Invalid gradient syntax

Missing color stops or using incorrect angle notation causes parse errors:

```html
<!-- ❌ Parse error: invalid angle unit and missing second color stop -->
<div style="background-image: linear-gradient(45, red);"></div>
```

Angles need a unit (like `deg`), and gradients need at least two color stops:

```html
<!-- ✅ Correct -->
<div style="background-image: linear-gradient(45deg, red, blue);"></div>
```

### Unescaped special characters in URL

File paths with spaces or parentheses need to be quoted:

```html
<!-- ❌ Parse error: unquoted URL with spaces -->
<div style="background-image: url(/images/my hero image.jpg);"></div>
```

```html
<!-- ✅ Correct: quoted URL -->
<div style="background-image: url('/images/my hero image.jpg');"></div>
```

### Vendor-prefixed values

Using non-standard prefixed syntax can trigger a parse error in the validator:

```html
<!-- ❌ Parse error: vendor prefix not recognized by validator -->
<div style="background-image: -webkit-linear-gradient(left, red, blue);"></div>
```

Use the standard, unprefixed syntax instead. Modern browsers no longer need the prefix for gradients:

```html
<!-- ✅ Correct: standard syntax -->
<div style="background-image: linear-gradient(to right, red, blue);"></div>
```

### Multiple backgrounds with incorrect separator

Multiple background images must be separated by commas, not semicolons or spaces:

```html
<!-- ❌ Parse error: wrong separator -->
<div style="background-image: url('a.png') url('b.png');"></div>
```

```html
<!-- ✅ Correct: comma-separated -->
<div style="background-image: url('a.png'), url('b.png');"></div>
```

### Moving styles to an external stylesheet

If the validator struggles with complex `background-image` values in inline `style` attributes, consider moving the CSS to a `<style>` block or external stylesheet, where the validator's CSS parser handles them more reliably:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Image Example</title>
  <style>
    .hero {
      background-image: url('hero.jpg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="hero"></div>
</body>
</html>
```