Background

Cores de Fundo

De forma geral, existem três maneiras mais simples de preencher uma caixa em HTML, usando cores sólidas, gradientes ou imagens. Essas formas são representadas a seguir:

Imagens

É possível colocar imagens como fundo de uma caixa e configurar suas propriedades de diversas maneiras.

Background Repeat

Com essa propriedade, é possível definir se uma imagem de fundo irá se repetir quando o tamanho da caixa em que estiver contida for maior do que o tamanho da imagem em si. Por padrão ela sempre vai ser repetida. Essa propriedade possui 4 valores:

Background Position

Além de escolher o nível de repetição do background, também podemos mudar a posição de referência de início das repetições. Por padrão, é considerado o canto esquerdo superior (left top), mas podemos ter várias opções.

Background Size

Outra coisa que podemos fazer é redimensionar a imagem para forçá-la a caber na caixa. Por padrão, nenhum redimensionamento será aplicado, e a imagem será exibida do seu tamanho natural. Porém, podemos usar a propriedade background-size para alterar esse comportamento.

• auto: A imagem de fundo será aplicada em seu tamanho original.
• [x]%: Redimensiona a largura da imagem e faz a altura se adaptar automaticamente.
• cover: Muda o tamanho da imagem para que ela seja sempre totalmente exibida na tela, sem nenhum corte.
• contain: Redimensiona a imagem para que ela cubra o contêiner, mesmo que para isso ocorram alguns eventuais cortes.

Background Attachment

A última propriedade que podemos configurar é o vínculo (attachment) da imagem de fundo com o resto do documento, principalmente se o conteúdo for maior do que a altura da página e seja necessário vazar uma rolagem vertical.

• scroll: (padrão) a imagem de fundo vai rolar junto com o conteúdo.
• fixed: A imagem de fundo vai ficar fixada enquanto o conteúdo vai sendo rolado (essa propriedade você pode observar no fundo desse site).