2

Estou tentando rodar meu projeto com uma imagem de fundo da seguinte forma:

A imagem está no caminho:
webapp/resources/libimagens/bg.png

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

Dentro da tag body{} nas CSS eu já fiz da maneira abaixo, mas não funcionou.

background-image: url(../libimagens/bg.png)

Agradeço a quem dispor solução.

3
  • Acho que te enganas-te a escrever o caminho do arquivo CSS :P
    – Chun
    2/10/2015 às 5:09
  • 1
    Desculpa, realmente digitei errado. o caminho correto do CSS é: "webapp/resources/libcss/estilo.css" - já editei.
    – Luiz
    2/10/2015 às 14:57
  • Não tem problema na CSS. Está chamando o arquivo CSS na página html que irá utilizá-lo? 2/10/2015 às 15:24

2 Respostas 2

2

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

E a imagem está no caminho:
webapp/resources/libimagens/bg.png

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

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

Ao usares - background-image: url(../libimagens/bg.png), estás a voltar uma pasta para trás.

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 primeiro subdiretório e seguir em frente
    (background-image: url(libimagens/bg.png);)

mais info

2
  • Eu já tinha usado dessa forma, mas não tinha funcionado. Então eu vi em outro post que eu deveria usar "../" para voltar um diretório diretório, pois pra mim isso se aplicaria, já que a imagem está em outra pasta imediatamente anterior. Eu uso o diretório resource para chamar o conteudo dela como library no JSF. Tem outra maneira?
    – Luiz
    2/10/2015 às 14:52
  • @Luiz , bom isso é estranho! Pois ele então deveria estar a funcionar. Já fizes-te o upload da imagem para esse diretório? Verifica também se não existe nenhum erro de digitação no caminho para a imagem. No final de teres feito e verificado isto e a imagem ainda assim não funcionar, utiliza o caminho absoluto para a imagem, que deverá ser algo como - background-image: url(/webapp/resources/libimagens/bg.png);, assumindo que webapp é a pasta raiz.
    – Chun
    2/10/2015 às 19:06
2

Usar ../, deveria estar funcionando, tente usar aspas dessa forma:

background-image: url("../libimagens/bg.png"), acredito que vai resolver.

Mas uma outra solução bem simples é usar o caminho absoluto para a imagem, por exemplo:

background-image: url(http://www.urldoseusite.com/libimagens/bg.png)

2
  • Na verdade isso é indiferente, ambas as maneiras (com o uso ou não de aspas) funcionam, é apenas uma questão de preferências. Sim, esse caminho deveria estar a funcionar.
    – Chun
    2/10/2015 às 19:15
  • @Lucas Muller, eu tentei tbm com aspas e com o caminho completo dessa forma. url(/webapp/resources/libimagens/bg.png);, só não usei link do site porque ainda não está em produção. Encontrei, porém, a solução usando EL dentro da url funcionou: body{ background-image: url("#{resource['libimagens/bg.png']}"); } Stach em inglês: stackoverflow.com/questions/6925733/… Obrigado.
    – Luiz
    2/10/2015 às 23:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .