Aula 54 - Cores e Imagens de Fundo (Background)

Introdução

O fundo de uma página é um dos elementos mais importantes do design Web. Ele pode ser composto por uma cor sólida, uma imagem ou até mesmo um gradiente.

O CSS oferece diversas propriedades para controlar a aparência do fundo dos elementos HTML.

📌 Um bom background melhora a aparência da página sem prejudicar a leitura do conteúdo.

Propriedade Background

A propriedade background é uma forma resumida de definir várias configurações de fundo ao mesmo tempo.


body {

  background: #e3f2fd;

}

Exemplo de aplicação de uma cor de fundo utilizando a propriedade background.

Background-Color

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


div {

  background-color: lightblue;

}

Cor	Exemplo
lightblue	Fundo Azul Claro
lightgreen	Fundo Verde Claro
lightyellow	Fundo Amarelo Claro

Background-Image

Permite utilizar imagens como plano de fundo.


body {

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

}

⚠️ A imagem deve estar localizada corretamente na pasta do projeto.

Background-Repeat

Controla a repetição da imagem de fundo.

Valor	Descrição
repeat	Repete horizontal e verticalmente.
repeat-x	Repete apenas na horizontal.
repeat-y	Repete apenas na vertical.
no-repeat	Não repete.


body {

  background-repeat: no-repeat;

}

Background-Position

Define a posição da imagem de fundo.

Valor	Posição
left top	Canto superior esquerdo
center center	Centro
right bottom	Canto inferior direito


body {

  background-position: center center;

}

Background-Size

Controla o tamanho da imagem de fundo.

Valor	Função
auto	Tamanho original.
cover	Preenche toda a área.
contain	Exibe toda a imagem.


body {

  background-size: cover;

}

Background-Attachment

Define se a imagem acompanha ou não a rolagem da página.

Valor	Descrição
scroll	Move junto com a página.
fixed	Permanece fixa.


body {

  background-attachment: fixed;

}

Exemplo Completo


body {

  background-image: url("paisagem.jpg");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}

Esse exemplo cria uma imagem de fundo ocupando toda a tela sem repetições.

Boas Práticas

Utilize imagens leves para melhorar o desempenho.
Evite fundos que dificultem a leitura do texto.
Utilize contraste adequado entre texto e fundo.
Prefira imagens otimizadas para Web.
Teste a visualização em dispositivos móveis.

Resumo da Aula

Propriedade	Função
background	Atalho para configurar fundos.
background-color	Define cor de fundo.
background-image	Define imagem de fundo.
background-repeat	Controla repetição.
background-position	Posiciona a imagem.
background-size	Controla o tamanho.

🖼️ Cores e Imagens de Fundo (Background)