Erro de imagem de fundo: identificando o operador incorreto

Ao tentar estilizar um elemento div com uma imagem de fundo usando notação abreviada, alguns usuários encontram um erro relacionado a um operador incorreto:

Erro: CSS: background: / é um operador incorreto.

Para corrigir esse problema, é crucial para entender a sintaxe correta da propriedade background. De acordo com as especificações CSS, o caractere / serve como um separador entre as propriedades background-position e background-size.

O seguinte snippet CSS demonstra o uso correto:

div {
  height: 100%;
  background: url('...') 100% 0/4% no-repeat;
}

Neste exemplo, "url(...) 100% 0" representa a posição do plano de fundo, enquanto "4%" indica seu tamanho. É importante observar que, embora o tamanho do plano de fundo seja opcional, ele deve ser especificado junto com a posição do plano de fundo ao usar a notação abreviada.

Omitir o separador / ou colocá-lo incorretamente entre as propriedades pode levar ao erro incorreto do operador. Além disso, é essencial especificar o tamanho sem posição. Por exemplo, o seguinte código CSS é válido:

div {
  height: 100%;
  background: url(...) 100% 0 no-repeat;
}