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.