Olá, Ruan!
Primeiro, para fazer com que a imagem de fundo ocupe todo o espaço, você também poderia tentar utilizar além do background-size: 100% as propriedades background-size: cover; e background-position: center; no CSS. O background-size: cover; faz com que a imagem de fundo se estenda por toda a área do elemento, cobrindo todo o espaço, e o background-position: center; centraliza a imagem no elemento. Por exemplo no seu CSS:
body {
background-image: url('sua-imagem.jpg');
background-size: cover;
background-position: center;
}
Quanto ao texto sobre a imagem de fundo, se entendi corretamente o que você deseja, você pode tentar adicionar um fundo semi-transparente ao elemento de texto para aumentar a legibilidade. Você pode fazer isso usando a propriedade background com um valor de cor RGBA, onde os três primeiros números são o código de cor RGB e o último número é a opacidade sendo 0 é totalmente transparente e 1 é nada transparente. Como nesse exemplo de código Ruan:
p {
background: rgba(255, 255, 255, 0.5); /* Isso adiciona um fundo branco semi-transparente */
padding: 10px;
}
Quanto a sua dúvida, isso acontece quando você usa background-size: contain; a imagem se encaixa dentro do espaço disponível, mantendo sua proporção original. Isso pode resultar em espaços vazios ao redor da imagem se ela não se ajustar perfeitamente ao tamanho do espaço.
Por outro lado, background-size: 100%; faz com que a imagem cubra completamente o espaço disponível, não importando sua proporção. Pode ser uma para quando você desejar preencher todo o espaço com a imagem, sem deixar espaços em branco.
Como nessa imagem:
Observe que o cover preenche toda a proporção da tela, abrindo mão de uma certa parcela de informações da imagem. Já com o contain, caso a imagem seja menor que a proporção da tela, ela não preenche, mas valida que todas as informações da imagem sejam apresentadas.
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!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
