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

[Dúvida] imagens não aparecem no background

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Trabalhando a semântica HTML e atividade Lidando com imagens

por artur de brito silva
| 45.7k xp | 4 posts
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Home | Apeperia</title>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
        <link href="css/base.css" rel="stylesheet">
        <link href="css/cabecalho.css" rel="stylesheet">
        <link href="css/chamada.css" rel="stylesheet">
        <link rel="stylesheet" href="destaques.css">
        <link rel="stylesheet" href="diferenciais.css">
        <link rel="stylesheet" href="sobre.css">
    </head>
    <body>
        <header class="cabecalho container">
            <img src="img/logo-apeperia.svg" alt="Logo da Apeperia" class="cabecalho__logo">
            <nav class="cabecalho__navegacao">
                <ul>
                    <li class="cabecalho__link"><a href="#">Sobre</a></li>
                    <li class="cabecalho__link"><a href="#">Planos</a></li>
                    <li class="cabecalho__link"><a href="#">Blog</a></li>
                    <li class="cabecalho__link"><a href="#">Destaques</a></li>
                    <li class="cabecalho__link"><a href="#">Institucional</a></li>
                    <li class="cabecalho__link"><a href="#">Contato</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section class="chamada container">
                <h1 class="chamada__titulo">Aplicativos Na Medida</h1>
                <p class="chamada__texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                <a href="#" class="chamada__botao botao">Conheça os planos</a>
            </section>

            <section class="destaques container">
                <h2 class="destaques__titulo">Destaques</h2>
                <a href="#">
                    <figure class="destaques__painel">
                        <img src="img/comecando-criar-logotipo.png" alt="Painel do post sobre criação de logotipo" class="destaques__painel-imagem">
                        <figcaption class="destaques__painel-texto">Conheça as primeiras etapas para a criação de um logotipo</figcaption>
                    </figure>
                </a>
                <a href="#">
                    <figure class="destaques__painel">
                        <img src="img/dicas-fotografia.png" alt="Painel do post sobre fotografia com celular" class="destaques__painel-imagem">
                        <figcaption class="destaques__painel-texto">Veja dicas de como fotografar usando seu celular</figcaption>
                    </figure>
                </a>
                <a href="#" class="destaques__botao botao">Receber destaques por email</a>
            </section>

            <section class="diferenciais container">
                <ul class="diferenciais__lista">
                    <li class="diferenciais__item 
                    .diferenciais__item--tempo">
                        <h2 class="item__titulo">Tempo</h2>
                        <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                    </li>

                    <li class="diferenciais__item
                    .diferenciais__item--foco">
                        <h2 class="item__titulo">Foco</h2>
                        <p class="item__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="item__titulo">Especialistas</h2>
                        <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                    </li>
                </ul>
            </section>
2 respostas
por artur de brito silva
| 45.7k xp | 4 posts
.diferenciais {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.diferenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.diferenciais__item {
    max-width: 350px;

    box-sizing: border-box;

    padding: 2rem 0 2rem 5rem;
}

.diferenciais__item-tempo {
    background-image: url(C:\Users\anabr\Desktop\projeto-apeperia-Aula1\img\icone-relogio.png);
}

.diferenciais__item-foco {
    background-image: url(C:\Users\anabr\Desktop\projeto-apeperia-Aula1\img\icone-dinheiro.png);
}

.diferenciais__item-especialistas {
    background-image: url(C:\Users\anabr\Desktop\projeto-apeperia-Aula1\img\icone-quimica.png);
}


.item__titulo {
    color: #4f4f4f;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.item__texto {
    line-height: normal;
}
solução!
por Lorena Garcia
| 8288.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

Oi Artur, tudo bem?

No seu HTML você está chamando as classes assim .diferenciais__item--tempo, com o ponto na frente, lembrando que assim só chamamos no CSS.

Retira o ponto de todas as classes no HTML.

E noCSS ajusta os nomes para diferenciais__item--tempo também, pois lá você está usando apenas um traço (.diferenciais__item-especialistas), então o CSS não vai reconhecer.

Se não funcionar, você pode tentar ajustar o caminho da imagem. Você já tentou usar o caminho relativo? Igual feito na aula, assim:

.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);
}

Assim o código fica menor e mais legível. Se a estrutura do seu projeto estiver igual ao da aula esse caminho irá funcionar.

Você pode comparar o seu código com o a da aula, baixando ele nessa aula.

Um abraço e bons estudos.