Aula 10 — Backgrounds e imagens de fundo

No CSS, fundos não servem apenas para “pintar” a tela. Eles ajudam a criar hierarquia visual, separar seções e dar identidade ao layout.

Nesta aula, você vai aprender a usar cores, imagens e gradientes de fundo do jeito certo.

Cor de fundo — background-color

A propriedade background-color define a cor de fundo de um elemento.

 .card { background-color: #428bca; } 

Ela pode usar qualquer formato de cor que você já aprendeu: HEX, RGB, RGBA ou HSL.

Imagem de fundo — background-image

Para usar uma imagem como fundo, usamos background-image.

 .banner { background-image: url("imagem.jpg"); } 

Diferente da tag <img>, imagens de fundo são usadas para fins visuais e decorativos.

Repetição da imagem — background-repeat

Por padrão, imagens de fundo se repetem. Podemos controlar isso com background-repeat.

 .banner { background-repeat: no-repeat; } 

Valores comuns:

• repeat — repete (padrão)
• no-repeat — não repete
• repeat-x — repete na horizontal
• repeat-y — repete na vertical

Posição da imagem — background-position

A propriedade background-position define onde a imagem aparece.

 .banner { background-position: center; } 

Exemplos comuns:

• center
• top
• bottom
• left / right

Tamanho da imagem — background-size

Com background-size, controlamos o tamanho da imagem de fundo.

 .banner { background-size: cover; } 

Valores importantes:

• cover — cobre todo o elemento
• contain — mantém a imagem inteira visível

Atalho background

Todas as propriedades de fundo podem ser escritas em uma única linha.

 .banner { background: url("imagem.jpg") no-repeat center / cover; } 

Esse atalho é comum em projetos profissionais.

Gradientes no CSS

O CSS permite criar gradientes sem usar imagens.

 .header { background: linear-gradient(90deg, #428bca, #2c3e50); } 

Tipos comuns:

• linear-gradient
• radial-gradient

Boas práticas com backgrounds

• Evite imagens muito pesadas
• Garanta contraste entre fundo e texto
• Use imagens de fundo para decoração
• Prefira gradientes quando possível

Na próxima aula, vamos entender display e o fluxo do documento — como os elementos se organizam naturalmente na página 🧱✨