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

A imagem do banner não aparece apos trocar para o CSS

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Estilização do Quem Somos e atividade Faça como eu fiz na aula

por Vinicius Canhisares Mazuca
| 97.2k xp | 7 posts
Product Owner

Vi que tiveram duvidas parecidas, mas nenhuma das soluções resolveu o meu caso.

print do codigo: .banner__imagem{ background: url('../../img/banner.jpg') no-repeat center / cover;height: calc(100vh-72px); width: 100%;}

Observei duas coisas relevantes:

  1. Ao retirar o calculo da propriedade altura, deixando apenas "height: 100vh;", a imagem aparece!
  2. Se, no html, eu inserir algum conteudo na div (mas deixando o calc na propriedade height como na aula), a imagem aparece no tamanho do conteúdo inserido na div: print do resultado obtido com o item2html da section banner: Insira aqui a descrição dessa imagem para ajudar na acessibilidade
2 respostas
por Vinicius Canhisares Mazuca
| 97.2k xp | 7 posts
Product Owner

Resolveu o problema quando eu segui nas aulas e adequei a responsividade. Mas não entendi pq..

solução!
por Lorena Garcia
| 8289.7k xp | 12130 posts
Alura Scuba Team Suporte Educacional

Oi Vinicius, tudo bem?

Pelo seu print podemos ver que está assim no height: calc(100vh-72px);, os números juntinhos do sinal de subtrair, sem um espaço entre eles. Dessa forma está errado.

A forma correta de escrever é deixando o espaço senão o CSS não entende o que você quer dizer.

O correto é assim:

.banner__imagem {
    background: url('../../img/banner.jpg') no-repeat center / cover;
    height: calc(100vh - 72px);
    width: 100%;
}

Um abraço e bons estudos.