Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problemas com o background-image

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Estilização do Quem Somos e atividade Estilizando as pessoas

por Lauro Santos de Araújo
| 93.3k xp | 12 posts

Simplesmente a imagem não aparece... Estou usando o navegador Brave e o Edge, a imagem de fundo não aparece de forma alguma quando uso o seguinte código...

.pessoa__imagem .pessoa__imagem--roberta {
    background-image: url('../../img/pessoas/roberta.jpg');
}

.pessoa__imagem .pessoa__imagem--marcela {
    background-image: url('../../img/pessoas/marcela.jpg');
}

.pessoa__imagem .pessoa__imagem--andreia {
    background-image: url('../../img/pessoas/andreia.jpg');
}

Teive que criar o seguinte código para resolver...

.pessoa__imagem {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    height: 300px;
    margin: 0 auto;
    width: 300px;
}

#pessoa__imagemRoberta {
    background-image: url('../../img/pessoas/roberta.jpg');
}

#pessoa__imagemMarcela {
    background-image: url('../../img/pessoas/marcela.jpg');
}

#pessoa__imagemAndreia {
    background-image: url('../../img/pessoas/andreia.jpg');
}

html:

<div class="pessoas">
                    <div class="pessoa">
                        <div class="pessoa__imagem" id="pessoa__imagemRoberta"></div>
                        <span class="pessoa__nome">Roberta</span>
                        <span class="pessoa__funcao">Conteúdo</span>
                    </div>
                    <div class="pessoa">
                        <div class="pessoa__imagem" id="pessoa__imagemMarcela"></div>
                        <span class="pessoa__nome">Marcela</span>
                        <span class="pessoa__funcao">Chef de cozinha</span>
                    </div>
                    <div class="pessoa">
                        <div class="pessoa__imagem" id="pessoa__imagemAndreia"></div>
                        <span class="pessoa__nome">Andréia</span>
                        <span class="pessoa__funcao">Pequena Produtora</span>
                    </div>
                </div>
1 resposta
solução!
por Lorena Garcia
| 8361.4k xp | 12214 posts
Alura Scuba Team Suporte Educacional

Oi Lauro, tudo bem?

Desculpe a demora em retornar.

Para funcionar, é preciso fazer separado no CSS, assim:

.pessoa__imagem--roberta {
    background-image: url('../../img/pessoas/roberta.jpg');
}

.pessoa__imagem--marcela {
    background-image: url('../../img/pessoas/marcela.jpg');
}

.pessoa__imagem--andreia {
    background-image: url('../../img/pessoas/andreia.jpg');
}

Sem o primeiro .pessoa__imagem que você colocou junto no primeiro código.

Aí você deixa o HTML assim:

<div class="pessoas">
                <div class="pessoa">
                    <div class="pessoa__imagem pessoa__imagem--roberta"></div>
                    <span class="pessoa__nome">Roberta</span>
                    <span class="pessoa__funcao">Conteúdo</span>
                </div>
                <div class="pessoa">
                    <div class="pessoa__imagem pessoa__imagem--marcela"></div>
                    <span class="pessoa__nome">Marcela</span>
                    <span class="pessoa__funcao">Chef de cozinha</span>
                </div>
                <div class="pessoa">
                    <div class="pessoa__imagem pessoa__imagem--andreia"></div>
                    <span class="pessoa__nome">Andréia</span>
                    <span class="pessoa__funcao">Pequena Produtora</span>
                </div>
            </div>

Sem as ids que você criou para que as imagens aparecessem. Claro, se você quiser, senão pode deixar como já tinha resolvido.

Um abraço e bons estudos.