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

Banner n aparece após trocar a tag <img> por <div> e referenciado- a no CSS como background.

Referente ao curso Arquitetura CSS: descomplicando os problemas

por henrique pires nobre de oliveira
| 20.9k xp | 3 posts

Bom dia, substitui a tag img pela tag div por se tratar de uma imagem ilustrativa é passei a referencia do caminho no CSS como background, mas o banner n apareceu, alguem sabe como resolver :(

Dentro do index.html ⬇
<section class="banner">
                <div class = "banner__imagem"></div>
                <h2 class="banner__titulo">Reaproveite melhor os alimentos!</h2>
            </section>
Dentro do CSS ⬇
.banner__imagem {
    background: url('../../img/banner.jpg') no-repeat center / cover;
    width: 100%;
}

OBS: a classe .banner__imagem segue o caminho: ARQUITETURA-CSS-ASSETS/assets/css/banner/banner-imagem.css; E a pasta img que contem a imagem do banner segue o caminho: ARQUITETURA-CSS-ASSETS/assets/img/banner.jpg; A pasta banner-imagem.css que contem a classe (.banner__imagem) segue o link e o href abaixo.

<link href="./assets/css/banner/banner-imagem.css" rel="stylesheet" />
3 respostas
por Gustavo Barbosa Santos
| 325.5k xp | 43 posts

Você precisa também adicionar uma altura height para imagem aparecer.

por henrique pires nobre de oliveira
| 20.9k xp | 3 posts

mais a altura haight eu adicionei no @media

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

@media screen and (min-width: 0) {
    .banner__imagem{
        height: calc(100vh -52px);
    }
}

@media screen and (min-width: 768px) {
    .banner__imagem{
        height: calc(100vh- 72px);
    }
}
solução!
por Gustavo Barbosa Santos
| 325.5k xp | 43 posts

Esse calc não funciona, 

calc(100vh -52px)

Você tem que pelo menos um espaço entre o operador, no caso o sinal -

Assim, acredito que funcione

height: calc(100vh - 52px);

Precisa fazer essa modificação também na outra media query.

Espero que funcione.