Imagem Duplicou

:root { --Branco--principal: #ffffff; --cinza--principal: #C0C0C0; --botao--azul: #167df7; --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"); }

.container { height: 100vh; }

Oi Gabriel, tudo bem?

Adicione essas propriedades por favor:

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

1. background-repeat: no-repeat;

   • A propriedade background-repeat determina como a imagem de fundo deve ser repetida. Neste caso, está definido como "no-repeat", o que significa que deve aparecer apenas uma vez.

2. background-size: contain;

   • Esta propriedade define como a imagem de fundo deve ser dimensionada em relação ao elemento que a contém. "contain" faz com que a imagem seja dimensionada para caber dentro do elemento de forma que toda a imagem seja visível, mantendo sua proporção original. Isso garante que a imagem inteira seja exibida, mesmo que isso signifique que haja espaços vazios no elemento.

E você sempre pode conferir o código da aula no repositório do curso:

• Repositório

Um abraço e bons estudos.