CSS não insere a imagem | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

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

23/09/2020

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

23/09/2020

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

23/09/2020

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

23/09/2020

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

04/10/2020

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