Banner n aparece após trocar a tag <img> por <div> e referenciado- a no CSS como background. | Arquitetura CSS: descomplicando os problemas

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

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

22/06/2022

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

por henrique pires nobre de oliveira

| 20.9k xp | 3 posts

22/06/2022

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

22/06/2022

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.