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

imagens do background nao aparecem

Eu chamo as imagens e nao sei pq no browser elas nao aparecem. O pathing ta correto e as imagens estao na pasta, nao sei se pode ser algum conflito com o css, pq chamo elas no html e aparecem.

.diferenciais__item {
    box-sizing: border-box;
    max-width: 350px;
    padding: 2rem 0 2rem 5rem;
}

.diferenciais__item--tempo{
    background-image: url("../../img/icone-relogio.png");
}

.diferenciais__item--foco{
    background-image: url(../../img/icone-dinheiro.png)
}

.diferenciais__item--especialistas{
    background-image: url("../../img/icone-quimica.png");
}
        <section class="diferenciais container">
            <ul class="diferenciais__lista">
                <li class="diferenciais__item">
                    <h2 class="diferenciais__titulo diferenciais__item--tempo" >Tempo</h2>
                    <p class="diferenciais__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                </li>
                <li class="diferenciais__item diferenciais__item--foco">
                    <h2 class="diferenciais__titulo">Foco</h2>
                    <p class="diferenciais__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                </li>
                <li class="diferenciais__item diferenciais__item--especialistas">
                    <h2 class="diferenciais__titulo">Especialistas</h2>
                    <p class="diferenciais__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                </li>
            </ul>
        </section>

O browser da erro 404

Print do console do browser com erro 404

7 respostas

Olá João, nesta parte do seu código está faltando as aspas dentro do url .diferenciais__item--foco{ background-image: url(../../img/icone-dinheiro.png) }, talvez pode ser isso. Espero ter ajudado, bons estudos!

Boa noite Ially tentei colocar as aspas pois quando entrei no forum, vi que alguem recomendou a utilizacao delas mas ainda assim nao resolveu. Obrigado de qualquer maneira :)

Boa noite Joao tenta o colocar da seguinte forma

.diferenciais__item--tempo{
  background-image: url(../img/icone-relogio.png);
}
.diferenciais__item--foco{
  background-image: url(../img/icone-dinheiro.png);
}
.diferenciais__item--especialistas{
  background-image: url(../img/icone-quimica.png);
}

sem aspas e so fazer ".."(voltar pasta) uma vez ( se você não alterou a estrutura da pasta padrão esse vai ser o caminho )

solução!

OBS: maquei errada a solucao do topico, que foi feita pelo Marcus logo abaixo.

Obrigado por tentar ajudar, mas ainda não deu, o pathing está correto, ele tem que voltar duas pastas, no meu caso volta para a do CSS geral e depois para a do projeto onde esta a pasta com as imagens. Realmente acho que deve ser algum conflito com o CSS/HTML, porque não peguei o CSS feito do curso eu programei na mão pra aprender mais. De qualquer jeito obrigado, mesmo sem as imagens deu pra aprender bastante com o curso.

Oi João! Esse erro ocorre no seu arquivo HTML. Não no CSS. Muito provavelmente o problema está na tag "meta" no seu cabeçalho ("head").

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Perceba que a palavra "device" se escreve com a letra "c" e não com "d". Ao qual está apresentando erro com a palavra "devide".

Quanto a imagem não aparecer é outra história. O problema são as aspas. O CSS não reconhece como um parâmetro válido. Portanto, coloque aspas, e aproveite para corrigir o caminho do arquivo de imagem. Ele é relativo ao documento CSS neste caso, mas prefira pelo caminho relativo ao site (onde a imagem se encontra no site). Exemplo:

Caminho relativo ao css:

.nome-da-classe-css {
    background-image: url("../img/icone-relogio.png");
}

Caminho relativo ao site:

Para o caminho http://meusite.com.br/pasta-exemplo/img/icone-relogio.png utilize o css:

.nome-da-classe-css {
    background-image: url("/pasta-exemplo/img/icone-relogio.png");
}

Dá uma conferida e vê pra gente se deu certo!

Espero ter contribuído.

Verdade, tinha cometido esse erro no head, mas o foi porque eu dupliquei o código, botei ele certo mais em baixo e esqueci de apagar o de cima. Obrigado por me alertar.

imagem do VScode destacando a linha de código duplicado errada

Em relação as imagens, deram certo! Coloquei o pathing relativo ao site e funcionou, muito obrigado mesmo, já tinha ate desistido de tentar fazer funcionar.

.diferenciais__item--tempo{
    background-image: url("/img/icone-relogio.png");
}

.diferenciais__item--foco{
    background-image: url("/img/icone-dinheiro.png");
}

.diferenciais__item--especialistas{
    background-image: url("/img/icone-quimica.png");
}

Olá, João! Que bom que pude ajudar. Agora é só sucesso!