Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] problema na imagem

/* PACOTES DE VIAGENS */

.pacotes-destino.hero {
margin-bottom: 80px;
}

.pacotes-destino .hero-img {
height: 480px;
background: url(../img/pacotes-destino/japan-bg-hero-tablet.png) no-repeat;
background-size: cover;
}
.pacotes-destino .hero-content {
padding: 65px 24px;
}

.pacotes-destino .hero-content h1 {
font-size: 40px;
color: var(--text-secondary-color);
font-weight: var(--title-weight);
}

.pacotes-destino .hero-content hr {
width: 180px;
height: 4px;
background-color: var(--secondary-color);
border: none;
margin: 16px 0 32px;
}

.pacotes-destino .hero-content p {
font-size: 20px;
color: var(--text-secondary-color);
font-weight: var(--text-weight);
line-height: 32px;
}

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

continua herdando a imagem do hero, oque fazer?

1 resposta

Olá, Lucas, como vai?

O CSS que você compartilhou está aplicando o background corretamente na classe hero-img, com a propriedade background apontando pro arquivo e o background-size configurado como cover. Esse tipo de comportamento, onde a imagem antiga continua aparecendo mesmo depois de mudanças no código, pode estar ligado a cache do navegador, que às vezes segura a versão anterior do CSS ou da imagem mesmo depois de salvar o arquivo.

Pra conseguir analisar com mais profundidade, seria interessante você compartilhar o link do projeto completo no GitHub, incluindo a estrutura de pastas, o HTML e o CSS. Assim dá pra verificar se existe alguma outra regra de CSS sobrescrevendo essa propriedade, ou se há alguma duplicidade de classes que esteja causando esse comportamento.

Você já tentou dar um refresh forçado no navegador, tipo Ctrl+Shift+R, pra ver se a imagem muda depois disso?

Fico no aguardo e a disposição :)