Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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?
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.
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 :)