Verificação HTML: CSS: "background-image": Erro de Análise.

Sobre este problema HTML

Quando o analisador de CSS encontra um valor de background-image que não consegue compreender, assinala um erro de análise. Isto não significa necessariamente que o navegador não renderize os seus estilos — os navegadores são frequentemente mais tolerantes que os validadores — mas indica que o seu CSS não está conforme à especificação. CSS inválido pode levar a renderização imprevisível em diferentes navegadores, torna o seu código mais difícil de manter, e pode causar falhas silenciosas de estilos em certos ambientes.

Causas comuns deste erro incluem:

Função url() em falta à volta de caminhos de imagem.
URLs sem aspas ou com aspas incorretas contendo caracteres especiais como espaços ou parênteses.
Erros tipográficos em nomes de funções CSS (por exemplo, lnear-gradient em vez de linear-gradient).
Usar valores com prefixos de fornecedor (por exemplo, -webkit-linear-gradient) em contextos onde o validador espera CSS padrão.
Sintaxe de gradiente inválida, como pontos de cor em falta, unidades de ângulo incorretas, ou argumentos de função mal formados.
Usar propriedades personalizadas de CSS (variáveis) ou sintaxe mais recente num atributo style, que o analisador de CSS do validador pode não suportar totalmente.

Para corrigir isto, reveja a declaração exata de background-image para a qual o validador está a apontar. Certifique-se de que todos os URLs estão envolvidos em url(), todos os gradientes usam nomes de função corretos e argumentos válidos, e todas as strings estão devidamente citadas e fechadas.

Exemplos

Função `url()` em falta

Um caminho de ficheiro simples sem o envolvimento url() é inválido:

<!-- ❌ Erro de análise: url() em falta -->

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

Envolva o caminho em url():

<!-- ✅ Correto -->

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

Erro tipográfico no nome da função de gradiente

<!-- ❌ Erro de análise: função mal escrita -->

<div style="background-image: lnear-gradient(to right, red, blue);"></div>

<!-- ✅ Correto -->

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

Sintaxe de gradiente inválida

Pontos de cor em falta ou usar notação de ângulo incorreta causa erros de análise:

<!-- ❌ Erro de análise: unidade de ângulo inválida e segundo ponto de cor em falta -->

<div style="background-image: linear-gradient(45, red);"></div>

Os ângulos precisam de uma unidade (como deg), e os gradientes precisam de pelo menos dois pontos de cor:

<!-- ✅ Correto -->

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

Caracteres especiais não escapados no URL

Caminhos de ficheiros com espaços ou parênteses precisam de estar entre aspas:

<!-- ❌ Erro de análise: URL sem aspas com espaços -->

<div style="background-image: url(/images/my hero image.jpg);"></div>

<!-- ✅ Correto: URL com aspas -->

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

Valores com prefixos de fornecedor

Usar sintaxe não padrão com prefixos pode desencadear um erro de análise no validador:

<!-- ❌ Erro de análise: prefixo de fornecedor não reconhecido pelo validador -->

<div style="background-image: -webkit-linear-gradient(left, red, blue);"></div>

Use a sintaxe padrão, sem prefixo. Os navegadores modernos já não precisam do prefixo para gradientes:

<!-- ✅ Correto: sintaxe padrão -->

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

Múltiplos backgrounds com separador incorreto

Múltiplas imagens de fundo devem ser separadas por vírgulas, não por ponto e vírgula ou espaços:

<!-- ❌ Erro de análise: separador errado -->

<div style="background-image: url('a.png') url('b.png');"></div>

<!-- ✅ Correto: separado por vírgulas -->

<div style="background-image: url('a.png'), url('b.png');"></div>

Mover estilos para uma folha de estilo externa

Se o validador tem dificuldades com valores complexos de background-image em atributos style inline, considere mover o CSS para um bloco <style> ou folha de estilo externa, onde o analisador de CSS do validador os trata de forma mais fiável:

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