CSS background-image - Qual é o uso correto?

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

1. Precisa estar entre aspas, ou seja: 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 dos quais eu deva estar ciente para garantir que funcione corretamente em navegadores compatíveis com os padrões.

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

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

background-image: url(image.jpg);

Ou

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

No entanto, do W3 :

Alguns caracteres que aparecem em um URI não citado, 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 URI:' \ (', '\)'.

Portanto, em casos como esses, é necessário usar aspas ou aspas duplas ou escapar dos caracteres.

1. Não, você não precisa de aspas.

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 aspas é um bom hábito

2) pode ser caminho relativo, por exemplo:

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

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

3) você deve usar a declaração completa da imagem de plano de fundo para que ela se comporte de maneira consistente nos navegadores compatíveis com os 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 backgroundpropriedade "taquigrafia" 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 horizontal e verticalmente) e também o local da imagem em relação ao seu contêiner.

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

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

basta verificar a estrutura de diretórios onde exatamente a imagem é, suponha que você tenha uma pasta css e uma pasta de imagens fora da pasta css, então você terá que usar "../ images / image.jpg" e ele funcionará como antes. estrutura de diretório.

você realmente não precisa de aspas, se, digamos, usar a imagem do seu arquivo css, pode ser

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

Você não precisa usar aspas e pode usar o caminho que quiser!

Dê uma olhada nas respectivas páginas de referência de ponto de site para imagem de plano de fundo e URIs

1. Ele não precisa estar entre aspas, mas pode ser usado se você quiser. (Acho que o IE5 / Mac não suporta aspas simples).
2. Tanto o relativo quanto o absoluto são possíveis; um caminho relativo é relativo ao caminho do arquivo css.

basta escrever no seu arquivo css como abaixo

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