Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

CSS não insere a imagem

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Rodapé

por Carlos Renê Braz Ferreira
| 29.6k xp | 9 posts

Quando eu coloco uma cor no background pelo CSS funciona normalmente, mas quando coloco o código para inserir a imagem, simplesmente não funciona. Já tentei diversas alternativas. Ao invés de background eu usei o background-image e não deu certo. Tentei colocar a imagem na mesma pasta onde fica o código da página e tbm não funciona. Já olhei a imagem para ver se ela está corrompida ou algo assim e nada.

O resultado é sempre o rodapé todo branco. Se alguém puder me ajudar, agradeço. Se tem algum erro no meu código eu não estou conseguindo identificar. Valeu!

<footer class="rodape">
        <img src="img/logo-branco.png" alt="Logo">
        <p>Copyright Barbearia Alura - 2019</p>
</footer>

.rodape {
    text-align: center;
    background: url("/img/bg.jpg");
    padding: 40px 0;
}
5 respostas
por Lúcio Carvalho Almeida
| 181.7k xp | 67 posts

Bom dia Carlos, acho que encontrei o seu problema.

Falta adicionar um ponto antes do caminho da imagem, assim:

.rodape {
    text-align: center;
    background: url("./img/bg.jpg");
    padding: 40px 0;
}

Esse erro acontece por que no mundo da computação o "./" significa a pasta atual, apenas a "/" acaba apontando para o caminho errado.

por Carlos Renê Braz Ferreira
| 29.6k xp | 9 posts

Bom dia, Lúcio! Obrigado pela ajuda. Eu tentei dessa mesma forma que vc mostrou e não deu certo. Coloquei três pontos tbm, para testar e não funcionou.

solução!
por Helber
| 68.7k xp | 4 posts

Bom dia Carlos! Eu deixei a imagem na mesma pasta do nosso HTML, e defini dessa forma abaixo, já tentou desse jeito?

<footer>
            <img src="logo-branco.png">
            <p class="copy"> © Copyright ByHelber</p></footer>

.rodape{
    text-align: center;
   background: url("bg.jpg");
    padding:40px 0;
}
por Carlos Renê Braz Ferreira
| 29.6k xp | 9 posts

Boa tarde!

Na pasta do HTML não deu certo, mas coloquei na pasta do CSS e funcionou. Obrigado!

por Marcelo Henrique Pera
| 21.5k xp | 3 posts

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

Assim da pra separar o css em uma pasta específica e a img em outra pasta