Carregando...

Fundos CSS

Você já sabe colorir o texto. Agora pinte a superfície atrás. Fundos preenchem a caixa do elemento — cores sólidas, fotos e depois gradientes — enquanto as letras ficam por cima com color.

O que é um fundo CSS?

Um fundo é a camada pintada atrás do conteúdo do elemento (e costuma ficar atrás do padding). Você controla com uma família de propriedades: background-color, background-image, background-repeat, background-size, background-position e o atalho background. Gradientes têm lição própria — hoje preenchimentos sólidos e bases de imagem.

Propriedades em um olhar

Aprenda primeiro o papel de cada uma. Não precisa de todas as palavras no primeiro dia.

📊 Propriedades cotidianas de fundo CSS

Propriedade Função Começo cotidiano
background-color Preenchimento sólido atrás do conteúdo background-color: #f1f5f9;
background-image Camada de imagem (ou gradiente depois) background-image: url("hero.jpg");
background-repeat Ladrilhar ou parar background-repeat: no-repeat;
background-size Escalar a imagem na caixa background-size: cover;
background-position Alinhar a imagem background-position: center;
background Atalho de vários valores background: #0f172a url("a.jpg") center / cover no-repeat;

Preenchimentos sólidos com background-color

O fundo mais simples é uma cor sólida. Use qualquer valor de cor que já conheça — nomeada, hex, rgb ou hsl.

Fundo sólido de cartão

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Mantenha o texto legível

Use color para as letras e background-color para a caixa. Preenchimento claro precisa de texto mais escuro; escuro, texto mais claro.

Imagens com background-image

Aponte um arquivo com url("…"). Caminhos são relativos ao CSS (ou URL absolutas). A imagem fica atrás do conteúdo — não é um <img> no fluxo HTML.

Foto atrás de um bloco hero

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Imagem vs <img>

Use <img> quando a foto é conteúdo (alt, significado). Use background-image quando é decoração atrás da UI ou de uma seção.

Pare o ladrilho: no-repeat + cover

Por padrão muitos navegadores ladrilham uma imagem pequena. Em heroes desligue o mosaico e escale com cover para a foto preencher a caixa.

Imagem hero que preenche a caixa

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover em uma frase

cover escala até preencher a caixa — as bordas podem ser cortadas. contain encaixa a imagem inteira — podem aparecer faixas vazias.

Aponte o ponto focal

background-position define qual parte da foto permanece visível — útil quando cover corta rostos ou logos.

Mirar a foto

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Atalho (continue legível)

Você pode combinar valores em background. Comece por separado ao aprender; mude para o atalho quando a ordem for familiar.

Atalho compacto de background

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Dica de ordem

Padrão comum: cor, imagem, position / size, repeat. Se o atalho confundir, volte às propriedades separadas — ambas são válidas.

Experimente você

  1. .card com background-color: #f1f5f9 e texto escuro com color.
  2. .hero com background-image: url("…"), min-height e texto claro.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Mova position para left center ou right center e veja o que fica no enquadramento.
  5. Opcional: reescreva o hero com atalho background e uma cor de fallback antes do url().

Erros comuns

  • Usar color para preencher a caixa — só pinta letras
  • Esquecer no-repeat e o logo ladrilhar a seção
  • Caminhos url("…") quebrados (pasta errada ou sem aspas)
  • Fotos enormes sem compressão como fundo — páginas lentas
  • Pular para gradientes complexos antes de sólido + uma imagem (gradientes vêm depois)

Resumo

  • Fundos pintam atrás do conteúdo; color pinta o texto
  • background-color para sólidos; background-image para fotos
  • Controle fotos com no-repeat, cover/contain e position
  • O atalho é opcional — clareza vence esperteza ao aprender
  • Receitas completas de gradiente na próxima lição
  • Pratique um cartão cinza e um hero com foto até os nomes grudarem

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial