[Dúvida] Imagem não ocupa 100% da tela

<DOCTYPE html> <html> <head> <title>Alura Plus</title> <meta charset="UTF-8"> <META name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <boody> <section class="container principal"> <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1> <img src="assets/Combo.png" alt="O combo+ é a junção do alura+ e o alura lingua"> </section> </boody> </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("assets/background.png"); background-repeat: no-repeat; background-size: contain ; } .container { height: 100vh; }

Oii, Ader! Tudo bem?

Obrigada por disponibilizar um trecho do seu código. Por ele pude observar que no seu arquivo HTML a tag body está com um erro de sintaxe, foi escrito boody. Isso pode estar interferindo no estilo aplicado na imagem.

Sugiro que troque, segue o código refatorado:

<DOCTYPE html>
<html>
    <head>
        <title>Alura Plus</title>
        <meta charset="UTF-8">
        <META name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section class="container principal">
        <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
        <img src="assets/Combo.png" alt="O combo+ é a junção do alura+ e o alura lingua">
        </section>
    </body>
</html>

Espero ter ajudado. Qualquer dúvida, não hesite em recorrer ao fórum.

Bons estudos, Ader!