Background-image CSS – Qual é o uso correto?

Qual é o uso correto da propriedade background-image do CSS? As principais coisas que estou tentando entender é

  1. Precisa estar entre aspas, por exemplo: background-image: url('images/slides/background.jpg');
  2. Pode ser um caminho relativo (como acima) ou deve ser um URL completo?
  3. Quaisquer outros pontos que eu deveria estar ciente para garantir que ele funcione corretamente em navegadores compatíveis com padrões.

O caminho pode ser completo ou relativo (obviamente, se a imagem for de outro domínio, ela deve estar cheia).

Você não precisa usar aspas no URI; a syntax pode ser:

 background-image: url(image.jpg); 

Ou

 background-image: url("image.jpg"); 

No entanto, a partir do W3 :

Alguns caracteres que aparecem em um URI sem aspas, como parênteses, caracteres de espaço em branco, aspas simples (‘) e aspas duplas (“), devem ser escapados com uma barra invertida para que o valor URI resultante seja um token de URI:’ \ (‘, ‘\)’.

Portanto, em instâncias como essas, é necessário usar aspas ou aspas duplas ou escaping dos caracteres.

  1. Não, você não precisa de citações.

  2. Sim você pode. Mas observe que os URLs relativos são resolvidos a partir do URL da sua folha de estilo.

  3. Melhor não use aspas. Eu acho que existem clientes que não os entendem.

1) colocar citações é um bom hábito

2) pode ser caminho relativo por exemplo:

 background-image: url('images/slides/background.jpg'); 

irá procurar a pasta de imagens na pasta a partir da qual o css é carregado. Portanto, se as imagens estiverem em outra pasta ou fora da tree de pastas CSS, você deve usar o caminho absoluto ou relativo ao caminho da raiz (começando com /)

3) você deve usar a declaração completa para a imagem de fundo para fazê-lo se comportar consistentemente em navegadores compatíveis com padrões como:

 background:blue url('/images/clouds.jpg') no-repeat scroll left center; 

Caminhos relativos são bons e aspas não são necessárias. Outra coisa que pode ajudar é usar a propriedade background “abreviada” para especificar uma cor de fundo caso a imagem não seja carregada ou não esteja disponível por algum motivo.

 #elementID { background: #000 url(images/slides/background.jpg) repeat-x top left; } 

Observe também que você pode especificar se a imagem será repetida e em que direção (se você não especificar, o padrão é repetir horizontalmente e verticalmente) e também a localização da imagem em relação ao seu contêiner.

Se as suas imagens estiverem em um diretório separado do seu arquivo css e você quiser que o caminho relativo comece na raiz do seu site:

 background-image: url('/Images/bgi.png'); 

basta verificar a estrutura do diretório onde exatamente a imagem é supor que você tem uma pasta css e pasta de imagens fora da pasta css, então você terá que usar “../ images / image.jpg” e ele vai funcionar como para mim apenas se certificar de que estrutura de diretório.

você realmente não precisa de citações se deixar dizer usar está usando a imagem do seu arquivo css pode ser

 {background-image: url(your image.png/jpg etc);} 

Você não precisa usar aspas e você pode usar qualquer caminho que você gosta!

Dê uma olhada nas respectivas páginas de referência do sitepoint para imagens de plano de fundo e URIs

  1. Não precisa estar entre aspas, mas pode usá-las se quiser. (Eu acho que o IE5 / Mac não suporta aspas simples).
  2. Tanto relativo quanto absoluto é possível; um caminho relativo é relativo ao caminho do arquivo css.

basta escrever no seu arquivo css como abaixo

 background:url("images/logo.jpg")