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

Ta dando erro !

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

Quando coloco esse código ele não carrega imagem no meu navegador, tentei outros modos mais não funcionou ? O que pode ser?

10 respostas

Oi Aleff.

Isso geralmente é problema de caminho apontado. Faz o seguinte, abre a ferramenta de inspeção do navegador e vai na aba chamada Network. Dá refresh (f5) na página e veja se mostra o nome da imagem em vermelho na lista de arquivos que aparece, indicando os arquivos que foram baixados (ou não) do servidor.

Fiz isso e a imagem não ta sendo baixada.. Aparece esse erro ( castelo.jpg (failed) )... Tem como corrigir ou é só um bug ?

Ah tá, percebi agora. O caminho entre parênteses precisa ser entre aspas, assim:

background-image: url("img/castelo.jpg");

Tentei e mesmo assim não deu certo, tentei outras imagem e não funcionou ....

Então deve ser caminho. Pelo que vi aqui, as aspas não eram realmente necessárias, o navegador conseguiria interpretar sem.

Preciso saber como está sua estrutura, onde está seu arquivo .css e onde está a imagem.

solução!

Caro Aleff Williams de Melo, como está sua estrutura de pastas? Caso esteja:

pastaraiz/
├── CSS/
│   └── style.css
├── IMG/
│   └── castelo.jpg

É necessário que o css entenda que a imagem se encontra em outra pasta, portanto ele precisa sair e navegar pelo diretório até encontrar a pasta IMG.

Coloque ../ antes do img que vai funcionar

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

Caso contrario Dê uma olhada em seu código html se fez a importação do css no seu head

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/estilos.css">

Imagem estar na pasta img e ela estar jogada na pasta... O problema que nas outra imagem não deu esse erro e estar tudo no mesmo caminho, só que foi importado direto do html... Não conseguindo entender kkk coloquei no meu Google driver os arquivos : https://goo.gl/V0NtSu ..

Agora deu certo, e também entendi obg Wellington Augusto O de Jesus !!

Por causa dos ponto kkkk Trem complicado kkkk

Agora vi que já postou que resolveu :)


Aleff, seu CSS no Google Drive continua da forma antiga. Faça o que o Wellington orientou, coloque ".." antes do caminho da imagem:

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

Entendeu o lance dos pontos? Sempre que você colocar .. você estará voltando para página anterior referente à página que está. Você pode fazer isso várias vezes. Se você estiver um caminho C:\Teste\Pagina\Exercicio, considerando que está na pasta Exercicio e quiser pegar a imagem do castelo dentro da pasta Teste, poderia fazer assim:

background-image: url(../../castelo.jpg);

Já se fosse na raiz c:, seria:

background-image: url(../../../castelo.jpg);

E por aí vai :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software