Entrar Ainda não tem acesso?
4
respostas

Imagem do banner nao está carregando

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Estilização do Quem Somos e atividade Boas praticas com imagens

por Deise Moura Pequeno
| 54.3k xp | 30 posts

Eu nao sei o que está havendo, mas a imagem do banner nao está carregando....

no index: 

<section class="banner">
            <div class="banner__imagem" src="./assets/img/banner.jpg"></div>
             <h2 class="banner__titulo">Reaproveite melhor os alimentos</h2>
        </section>

no banner.css: 

.banner{
    position: relative;
}

no banner-imagem.css: 

.banner__imagem{
    background-image: url('../../img/banner.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh-72px);
    width: 100%;
}
4 respostas
por Germanna De Fatima Oliveira De Lima
| 309.2k xp | 307 posts

Oi Deise, tudo bem? tua imagem não tá no mesmo arquivo que teu index.html? Se tiver, você só precisa escrever (img/banner.jpg)

Espero ter ajudado. Se não tiver dado certo, me avisa. Se funcionou, pode fechar o tópico.

por Leonardo Worm Vieira
| 57.8k xp | 4 posts

Acredito que você precise remover o src da DIV

E manter apenas no css
por MARLON PAULO MENEZES DOS REIS
| 71.5k xp | 7 posts
Desenvolvedor Front-End Junior

Engraçado, aqui está dando a mesma coisa.

No index:

    <link rel="stylesheet" href="./assets/css/banner/banner.css">
    <link rel="stylesheet" href="./assets/css/banner/banner-imagem.css">
    <link rel="stylesheet" href="./assets/css/banner/banner-titulo.css">
    <section class="banner">
        <div class="banner__imagem"></div>
        <h2 class="banner__titulo">Reaproveite melhor os alimentos</h2>
    </section>

No CSS:

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

O mais estranho é que no VSCode eu uso um plugin chamado Image preview e no CSS mostra que a imagem está sendo "chamada" certinho. Veja no lado esquerdo do código o preview aparecendo.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por MARLON PAULO MENEZES DOS REIS
| 71.5k xp | 7 posts
Desenvolvedor Front-End Junior

Consegui resolver:

No banner-imagem.css

.banner__imagem {
  background: url('../../img/banner.jpg') no-repeat center / cover;
  height: calc(100vh - 72px); *aqui, o sinal de - estava colado no 72px...*
  width: 100%;
}