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

watch_later sexta-feira, outubro 16, 2015

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.