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.
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 ✨