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

About This HTML Issue

The background-image CSS property accepts a specific set of value types defined by the CSS specification. The most common are none (the default, meaning no image), the url() function pointing to an image file, and gradient functions like linear-gradient() or radial-gradient(). When the validator encounters a value that doesn’t match any of these patterns, it flags the error.

This issue often appears in inline style attributes within HTML, which is where the W3C HTML Validator checks your CSS. Common mistakes include providing a bare filename without url(), forgetting parentheses or quotes, using incorrect gradient syntax, or introducing typos in CSS function names.

Fixing this matters for several reasons. Browsers may silently ignore an invalid background-image declaration entirely, meaning your intended background simply won’t appear. This leads to broken visual designs that can be difficult to debug. Additionally, invalid CSS can cause parsing errors that may affect subsequent declarations in the same rule block.

How to fix it

Wrap image paths in url() — A bare filename like background-image: photo.jpg is invalid. It must be background-image: url("photo.jpg").
Use proper quoting — While quotes inside url() are technically optional for simple paths, always use them for paths containing spaces, parentheses, or special characters. Single or double quotes both work.
Check gradient syntax — If using gradients, ensure the function name is correct (e.g., linear-gradient, not linear-gradiant) and the arguments follow valid syntax.
Use recognized keywords — The only non-function keyword accepted is none. Values like transparent, auto, or arbitrary strings are not valid for this property.

Examples

Incorrect: bare filename without `url()`

<div style="background-image: hero.jpg;">
  Content here
</div>

Incorrect: misspelled function name

<div style="background-image: urls('hero.jpg');">
  Content here
</div>

Incorrect: missing parentheses in `url`

<div style="background-image: url 'hero.jpg';">
  Content here
</div>

Incorrect: invalid keyword

<div style="background-image: transparent;">
  Content here
</div>

Correct: using `url()` with a file path

<div style="background-image: url('hero.jpg');">
  Content here
</div>

Correct: using `none` to explicitly set no background image

<div style="background-image: none;">
  Content here
</div>

Correct: using a gradient function

<div style="background-image: linear-gradient(to right, #ff7e5f, #feb47b);">
  Content here
</div>

Correct: multiple background images

<div style="background-image: url('overlay.png'), linear-gradient(to bottom, #000, #333);">
  Content here
</div>

Correct: using a `<style>` block

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Image Example</title>
    <style>
      .banner {
        background-image: url("banner.png");
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="banner">Welcome</div>
  </body>
</html>

Always wrap image paths in the url() function, double-check function names for typos, and use quotes around paths that contain special characters. When in doubt, move your styles out of inline style attributes and into a <style> block or external stylesheet, which makes debugging CSS issues much easier.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Learn more:

MDN Reference

MDN Web Docs: background-image

Help us improve our guides

Was this guide helpful?