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

Não consigo adicionar background img pelo CSS no footer

Na aula 7, parte 2, não estou conseguindo adicionar a imagem bg.jpg ao rodapé, através do CSS. A imagem de background não aparece. Utilizo o VSCode. Os códigos são bem simples, aparentemente sem erro:

<footer>
        <img src="images/logo-branco.png">
        <p>Copyright g014</p>
</footer>

E no CSS:

footer {
    text-align: center;
    background: url("/images/bg.jpg");
}

Já tentei por a bg.jpg na mesma pasta e colocando background: url("bg.jpg");. Já tentei background: url("./images/bg.jpg"); e não funciona. Já pesquisei bastante e não consegui encontrar solução. Travei nessa parte. Um detalhe interessante, é que ao clicar ctrl+link de outra imagem no projeto, a imagem abre no VSCode. Porém quando tento abrir o bg.jpg, o VSCode não consegue abrir. Achei que esse seria o problema, mas mesmo trocando o url(" outra imagem que funciona no projeto"); continuo sem a imagem de backgroud. Também já tentei ` background: url("C:\Users\goia\OneDrive\Coding\Alura\Frontend\HTML5 E CSS3 1\Aula 1 completa\images\logo.png"); (que é o nome do diretório completo) e não consegui! Gostaria de entender, pq durante a aula o instrutor adiciona a bg-image somente com esses códigos. Alguém consegue me ajudar? Agradeço desde já!

3 respostas

Fala ai Iago, tudo bem? Se você abrir o console do navegador, dá algum erro informando que a imagem não foi encontrada (404)? Talvez vale você definir o background-position, background-size e background-repeat em conjunto para funcionar.

Além disso, seu footer precisa ter height e width para a imagem aparecer.

Espero ter ajudado.

solução!

Boa noite! Depois de vários testes aqui, percebi que a imagem que uso no css deve estar dentro da pastas do css (pelo menos no comando, background: url(" ");. Outro problema que percebi também é que a imagem que baixei veio corrompida, então não tava indo anteriormente, pois já havia tentado. Muito obrigado pela paciência e resposta, me fez correr atrás e descobrir o problema. Abraços!

Magina Iago, sempre que precisar não deixe de criar suas dúvidas.

Apenas uma observação, caso a imagem esteja fora da pasta do CSS você pode usar os caminhos relativos, por exemplo: url('../img/nome-da-imagem.jpg').

Abraços e bons estudos.