Verificação HTML: CSS: "background-image": X não é um valor de "background-image".

Sobre este problema HTML

A propriedade CSS background-image aceita um conjunto específico de tipos de valor definidos pela especificação CSS. Os mais comuns são none (o padrão, significando nenhuma imagem), a função url() apontando para um ficheiro de imagem, e funções de gradiente como linear-gradient() ou radial-gradient(). Quando o validador encontra um valor que não corresponde a nenhum destes padrões, sinaliza o erro.

Este problema aparece frequentemente em atributos style inline dentro de HTML, que é onde o Validador HTML da W3C verifica o seu CSS. Erros comuns incluem fornecer um nome de ficheiro sem url(), esquecer parênteses ou aspas, usar sintaxe de gradiente incorreta, ou introduzir erros tipográficos em nomes de função CSS.

Corrigir isto é importante por várias razões. Os navegadores podem ignorar silenciosamente uma declaração background-image inválida completamente, significando que o seu fundo pretendido simplesmente não aparecerá. Isto leva a designs visuais quebrados que podem ser difíceis de depurar. Além disso, CSS inválido pode causar erros de análise que podem afetar declarações subsequentes no mesmo bloco de regras.

Como corrigir

Envolva caminhos de imagem em url() — Um nome de ficheiro sem função como background-image: photo.jpg é inválido. Deve ser background-image: url("photo.jpg").
Use citação adequada — Embora as aspas dentro de url() sejam tecnicamente opcionais para caminhos simples, use-as sempre para caminhos que contenham espaços, parênteses, ou caracteres especiais. Aspas simples ou duplas funcionam.
Verifique a sintaxe de gradiente — Se usar gradientes, garanta que o nome da função está correto (ex., linear-gradient, não linear-gradiant) e que os argumentos seguem sintaxe válida.
Use palavras-chave reconhecidas — A única palavra-chave não-função aceite é none. Valores como transparent, auto, ou strings arbitrárias não são válidos para esta propriedade.

Exemplos

Incorreto: nome de ficheiro sem `url()`

<div style="background-image: hero.jpg;">
  Conteúdo aqui
</div>

Incorreto: nome de função mal escrito

<div style="background-image: urls('hero.jpg');">
  Conteúdo aqui
</div>

Incorreto: parênteses em falta em `url`

<div style="background-image: url 'hero.jpg';">
  Conteúdo aqui
</div>

Incorreto: palavra-chave inválida

<div style="background-image: transparent;">
  Conteúdo aqui
</div>

Correto: usando `url()` com um caminho de ficheiro

<div style="background-image: url('hero.jpg');">
  Conteúdo aqui
</div>

Correto: usando `none` para definir explicitamente nenhuma imagem de fundo

<div style="background-image: none;">
  Conteúdo aqui
</div>

Correto: usando uma função de gradiente

<div style="background-image: linear-gradient(to right, #ff7e5f, #feb47b);">
  Conteúdo aqui
</div>

Correto: múltiplas imagens de fundo

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

Correto: usando um bloco `<style>`

<!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>

Envolva sempre caminhos de imagem na função url(), verifique novamente nomes de função por erros tipográficos, e use aspas em volta de caminhos que contenham caracteres especiais. Em caso de dúvida, mova os seus estilos dos atributos style inline para um bloco <style> ou folha de estilo externa, o que torna a depuração de problemas CSS muito mais fácil.