Estou com duvida referente ao backgrond-size e gostaria de saber para que ele serve.
outra coisa que pude notar e em relação ao
background-size: cover; background-size: contain;
qual a diferença e para que servem?
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!
Estou com duvida referente ao backgrond-size e gostaria de saber para que ele serve.
outra coisa que pude notar e em relação ao
background-size: cover; background-size: contain;
qual a diferença e para que servem?
Oi, Levi, tudo bem?
O background-size é uma propriedade CSS que especifica o tamanho da imagem de fundo do elemento. Essa propriedade pode ser muito útil para garantir que a imagem de fundo se ajuste bem ao elemento, sem distorcer ou repetir de forma inadequada.
Existem várias maneiras de definir o background-size, mas você mencionou duas específicas: cover e contain.
background-size: cover; : faz com que a imagem de fundo cubra totalmente o elemento. A imagem é redimensionada para cobrir toda a área do elemento, mantendo a relação entre a largura e a altura da imagem. Se a proporção da imagem não corresponder à do elemento, a imagem será cortada para se ajustar.
background-size: contain; : com essa configuração, a imagem de fundo é redimensionada para se ajustar dentro do elemento, garantindo que a imagem inteira seja visível. A imagem manterá sua proporção, mas pode deixar espaços vazios no elemento se a proporção não corresponder.
Para exemplificar, imagine que você tem uma seção no seu site que precisa de uma imagem de fundo. Se você usar background-size: cover;, a imagem se ajustará para cobrir toda a seção, cortando partes da imagem se necessário. Se você usar background-size: contain;, a imagem inteira será visível, mas pode não cobrir toda a seção se a proporção for diferente.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!