1
resposta

duvida sobre background-size

quando eu coloco backgroundo-size: contain era pra ocupar toda o espaço do lado direito como esta na aula, só que ele ocupou só um pouco e nao tudo, só que quando eu coloco cover em vez de contain ele ocupa tudo, como esta na aula.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Plus</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section class="conteiner principal">
        <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
        <img src="img/Combo.png" alt="o combo é o alura+ e outra Língua">
        <img src="" alt="">
    </section>
</body>
</html>`

:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
}

body{
    background-color: var(--cor-de-fundo);  
    color: var(--branco-principal);
}

* {
    margin: 0;
    padding: 0;
}

.principal {
    background-image: url(img/Background.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.conteiner {
    height: 100vh;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi, Enzo, tudo bem?

A diferença entre contain e cover está no comportamento de redimensionamento da imagem de fundo. Ao utilizar o cover a imagem de fundo será redimensionada para cobrir todo o elemento, mesmo que para isso precise cortar partes da imagem. Por outro lado, ao usar contain a imagem de fundo será redimensionada para caber dentro do elemento, mantendo suas proporções. Isso pode resultar em espaços vazios se as proporções da imagem e do elemento não coincidirem.

Portanto, a imagem com o coveré uma boa opção para o seu caso, pois o tamanho de tela que você está usando deve ser diferente do tamanho da tela apresentado no curso, o que causa diferença no resultado do tamanho da imagem de fundo ao usar o contain, levando ao espaço em branco no lado direito da imagem.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!