Notei que em certa resolução de desktop (ex: 1024px), a imagem não está centralizada, seria interessante aplicar a propriedade background-position: center para corrigir esse problema.
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!
Solucionado
Notei que em certa resolução de desktop (ex: 1024px), a imagem não está centralizada, seria interessante aplicar a propriedade background-position: center para corrigir esse problema.
Olá, Guilherme! Tudo bem?
Muito obrigado por compartilhar essa sugestão conosco! É excelente ver você aplicando o conteúdo da aula e já pensando em refinamentos visuais para diferentes resoluções.
A sua dica vem para agregar bastante ao projeto. Enquanto o background-size: cover garante o preenchimento da área, adicionar o background-position: center ajuda a refinar o enquadramento, garantindo que o ponto focal da imagem se mantenha preservado mesmo em viewports intermediários, como o de 1024px que você testou.
É um ótimo complemento ao código da aula para quem deseja esse comportamento específico de centralização! O trecho ficaria assim com a sua implementação:
@media screen and (min-width: 1024px) {
.hero-img {
height: 620px;
background: url(../img/hero-desktop.jpg) no-repeat;
background-size: cover;
background-position: center; /* Refinamento sugerido */
}
}
Parabéns pelo empenho em deixar o layout ainda mais polido. Continue mergulhando nos estudos!
Bons estudos!
Sucesso ✨