Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Imagem não carrega pelo CSS

Mesmo colocando o caminho certo da pasta, a imagem não carrega quando passo o seguinte caminho:

header { background-image: url(img/castelo.jpg); background-size: cover; background-position:top center; }

Quais procedimentos devo seguir para solucionar este probleminha?

4 respostas

Olá José!

Como estão disponibilizados os seus arquivos?

A pasta img está dentro da pasta onde está o arquivo CSS?

Se seus arquivos estiverem assim:

  • index.html
  • css
    • arquivo.css
  • img
    • castelo.jpg

O seu código tem que ficar assim:


header {
    background-image: url("../img/castelo.jpg");
    background-size: cover;
    background-position: top center;
 }

Agora se estiver assim:

  • index.html
  • css
    • arquivo.css
    • img
      • castelo.jpg

O seu código está certo, então verifica no console se a imagem está sendo carregada e se apenas não está aparecendo.

Espero ter ajudado!

Abraços

solução!

Oi Jose, tudo bem?

Como esta a estrutura das pastas?

Existe um HTML na raiz do projeto e pastas CSS e IMG?

Se sim, lembre-se de colocar a url no CSS sempre da seguinte forma:

header { 
  background-image: url(../img/castelo.jpg); 
}

Repare nos ../ ali do começo do caminho, para o browser subir um nivel nas pastas e conseguir entrar na pasta img (lembre-se que seu CSS deve/deveria estar na pasta CSS).

Espero ter ajudado,

Abcs!

Natan, vlw cara. Estava faltando o ../ para o browser subir um nível das pastas.

A estrutura das pastas está assim:

.ProjetoX .bootstrap .css estilo.css .img castelo.jpg .js index.html

Boa Jose!

Se voce deixa sem o ../ o browser entende que a pasta IMG está junto com o CSS, mas na verdade está um nivel acima!

Ai pra subir só usar o ../

Se precisar subir dois, tres, quinze niveis, só ir colocando mais: ../../../pasta/arquivo.png.

Abcs!