PricingLoginStart free
CSS Academy · Aula

Cor e Imagem de Fundo

Aplique cores e imagens de fundo usando as propriedades background-color e background-image.

Aula 2 de 413 etapas

Cor e Imagem de Fundo é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

background-color

A propriedade background-color define uma cor sólida atrás de um elemento. Ela aceita qualquer valor de cor do CSS e fica visível através das áreas transparentes das imagens de fundo.

<div class="hero">Hero section</div>

background-image

background-image define uma ou mais imagens como fundo do elemento. As imagens são dispostas acima de background-color.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

background-size controla as dimensões da imagem. Valores importantes:

  • cover — preenche a área e recorta a imagem se necessário
  • contain — ajusta a imagem inteiramente dentro da área, mas pode deixar espaços vazios
  • 100% 100% — estica a imagem para preencher exatamente a área
<div class="hero"></div>

background-position

background-position define onde a imagem é posicionada. Use palavras-chave ou valores de porcentagem/comprimento.

<div class="hero"></div>

background-repeat

Por padrão, as imagens são repetidas em mosaico. Controle essa repetição com background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

background-attachment determina se a imagem rola junto com a página. fixed cria um efeito semelhante ao paralaxe; scroll é o padrão.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Múltiplos fundos

O CSS permite várias camadas de fundo separadas por vírgulas. A primeira camada listada aparece no topo.

<div class="card">Overlay + photo layers</div>

Abreviação background

A abreviação background combina todas as propriedades de fundo em uma única declaração. A ordem é importante para o tamanho: escreva-o depois da posição, separando-os com /.

<div class="hero"></div>

Recorte e origem do fundo

background-clip controla onde o fundo é pintado em relação ao modelo de caixa. background-origin define o ponto de referência para o posicionamento.

<div class="card">Clip &amp; Origin</div>

Recorte do fundo no texto

Use background-clip: text com uma cor de texto transparente para recortar uma imagem de fundo ou um gradiente no formato do texto.

<h1>Gradient Text</h1>

object-fit para <img> versus background-image

Para elementos <img>, use object-fit: cover e object-position em vez de background-image. Assim, as imagens permanecem no DOM para acessibilidade e SEO.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Verificação rápida

Qual valor de background-size preenche a área e recorta a imagem, em vez de deixar espaços vazios?

Responda na aula interativa

Recapitulação

Use background-color como alternativa sob as imagens. background-size: cover é a opção padrão para imagens de destaque que ocupam toda a área. Várias camadas de fundo oferecem recursos de composição. A abreviação combina concisamente todas as propriedades de fundo.

Grátis para começar

Aprenda CSS com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
40
Aulas
159
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Cor e Imagem de Fundo” é grátis?

Sim — o texto completo de “Cor e Imagem de Fundo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Cor e Imagem de Fundo”?

Aplique cores e imagens de fundo usando as propriedades background-color e background-image. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Cor e Imagem de Fundo”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Valores de Cor: Nomeados, Hexadecimais, RGB e HSL
  2. Cor e Imagem de Fundo
  3. Gradientes: Linear e Radial
  4. Opacidade e Transparência RGBA
← Voltar para CSS Academy