Meu background ficou com espaço à direita quando usei o background-size: contain. Ficou mais ajustado a direita quando mudei para 'cover'. Minha resolução é de 1366x768
Vi uma dúvida semelhante a minha aqui no fórum, porém não consegui identificar uma solição prática para resolver em definitivo essa questão, consegue me ajudar ?
Olá, Marcelo!
A propriedade 'contain' irá escalar a imagem para o maior tamanho possível de tal forma que tanto a altura quanto a largura da imagem se ajustem dentro do conteúdo/elemento. Isso pode resultar em espaços vazios ao redor da imagem.
Por outro lado, a propriedade 'cover' irá escalar a imagem para o menor tamanho de tal forma que tanto a altura quanto a largura da imagem preencham completamente o conteúdo/elemento. Isso pode resultar em partes da imagem sendo cortadas, pois a imagem é escalada mantendo sua proporção.
No seu caso, parece que o 'cover' está funcionando melhor, o que é ótimo. No entanto, se você quiser usar 'contain' e eliminar o espaço extra, você pode tentar centralizar a imagem de fundo usando a propriedade 'background-position'. Por exemplo, você pode usar 'background-position: center center;' para centralizar a imagem.
Aqui está um exemplo de como você poderia usar isso:
.principal {
background-image: url('sua-imagem.jpg');
background-repeat:no-repeat;
background-size: contain;
background-position: center center;
}
Lembre-se que cada caso pode exigir uma solução diferente, e o que funciona em uma situação pode não funcionar em outra. Portanto, é sempre bom experimentar diferentes soluções até encontrar a que melhor se ajusta ao seu caso.
Veja se ficou melhor, mas em caso de persistência poderia compartilhar mais informações a respeito do seu código, a fim de realizar testes para lhe fornecer uma resposta mais assertiva
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!