Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Inserindo Imagens

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Iniciando o projeto e atividade Inserindo imagens

por Estudante
| 15.1k xp | 13 posts

Estou com dúvida na aula 06 Inserindo Imagens do curso HTML e CSS: praticando HTML e CSS. Gostaria de saber o motivo das configurações do background serem colocadas no .principal e não no container. 

:root{
    --branco-principal:white;
    --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;
}
2 respostas
por Estudante
| 15.1k xp | 13 posts

.....

por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá, tudo bem?

O que ocorre é que conforme o andamento das aulas, irão ser construídas mais algumas <section> para esse projeto, todas elas terão uma classe em comum que é a .container. Sendo assim, é de fundamental importancia que nessa classe esteja contido apenas os estilos que são comuns para todas as seções.

No caso do background, ele é exclusivo da seção com classe .principal, pois é uma imagem de fundo que não irá se repetir nas outras seções futuras que serão construídas, você pode visualizar melhor no figma desse curso e é por esse motivo que os estilos referentes ao background não são colocados na classe .container.

Espero ter ajudado, bons estudos!