CSS Background-image e seus caminhos relativos (Simplesmente explicado)

Quando nós temos um problema com uma imagem que "não está a ser exibida", a primeira coisa que devemos verificar, é o caminho do seu diretório. Quando o caminho é absoluto (que significa que começa por http://), é fácil de seguirmos o seu caminho para confirmarmos se ele está correto ou não, mas quando o seu caminho é relativo (ou seja sem o http://), aí devemos ter atenção ao seu percurso e seguir os passos abaixo para termos a certeza de que a imagem está a ser apontada para o caminho correto.

• A imagem está no mesmo diretório que o arquivo que está a fazer referência a ele?
• A imagem está num diretório anterior?
• A imagem está num diretório posterior?

Os caminhos:

- A começar por "/" retorna para o diretório raiz e começa a partir daí
- A começar por "../" volta um diretório para trás e começa a partir daí
- A começar por "../../" volta dois diretórios para trás e começa a partir daí
- (e por aí em diante ...)
- Para avançar/mover para a frente, basta começar com o nome do sub-diretório (sem /) e seguir em frente - (background-image: url(images/body-bg.png);).

---

Recapitulando, imaginemos que temos o seguinte exemplo:

O arquivo CSS está no caminho:
webapp/resources/styles/styles.css

E a imagem está no caminho:
webapp/resources/images/body-bg.png

O caminho correto para a propriedade background-image será:

background-image: url(../images/body-bg.png);

Nota: Usar background-image: url(" ... "); com ou sem aspas background-image: url( ... ); é indiferente. A utilização das aspas é apenas uma questão de preferências, ambas as maneiras funcionam corretamente.