CSS: Background

Um plano de fundo, ou background, é a área posicionada sob o conteúdo, preenchimento e borda de um elemento. Com a propriedade background podemos preencher essa área.

Cor

No exemplo abaixo, utilizamos a propriedade background-color para atribuir a cor amarela ao fundo do texto:

Existem diversas propriedades para controlar o plano de fundo de um elemento, que conheceremos neste artigo. Para ver cada uma delas ser aplicada na prática assista ao curso Introdução ao CSS na Prática.

Imagem

O CSS nos permite utilizar imagens como plano de fundo de um elemento. Para isso utilizamos a propriedade background-image, que pode receber como valor o retorno na função url(), para a qual informamos o caminho para a imagem:

No exemplo acima, o elemento terá o plano de fundo preenchido com a cor amarela e logo após a imagem será aplicada sobre essa cor. Sendo assim, nas áreas de transparência da imagem ou onde ela não for visível, o que veremos será a cor de fundo. Caso a imagem também não seja corretamente carregada, apenas a cor será utilizada como preenchimento.

Caso a imagem utilizada seja menor que o elemento no qual ela foi inserida, o navegador levará em consideração o valor padrão da propriedade background-repeat, que costuma ser repeat e repetirá a imagem até que ela preencha todo o espaço disponível.

Para anular esse comportamento podemos alterar o valor da propriedade background-repeat:

Neste caso, a imagem não se repetirá.

A propriedade background-repeat pode ainda receber os valores repeat-x, para que a imagem se repita no eixo x, ou repeat-y para que a imagem se repita no eixo y.

Podemos ainda controlar o posicionamento da imagem, utilizando para isso a propriedade background-position. Por padrão, uma imagem que não se repete é posicionada no centro e a esquerda do elemento. Com background-position podemos determinar o quando essa imagem se deslocará em relação a essa posição inicial:

No caso acima a imagem se deslocará 10 pixels no eixo x e estará centralizada no eixo y;

Podemos ainda utilizar palavras chave como top, left, bottom e center para determinar esses valores.

A propriedade background possui ainda uma forma curta de ser escrita e que engloba todas as demais propriedades vistas aqui. Por exemplo, podemos unir todos os valores acima da seguinte forma:

Size

Muitas vezes durante a aplicação de um estilo é preciso ajustar o tamanho da imagem para que ela caiba no elemento. A propriedade background-size nos permite realizar pequenas modificações na imagem de um elemento para que ela seja redimensionada de acordo com a necessidade do estilo.

Neste exemplo informamos um valor de 16 pixels para a largura da imagem e deixamos que sua altura seja ajustada automaticamente com base nesse valor, preservando assim as suas proporções iniciais:

Podemos ainda utilizar um único valor para background-size, mas nesse caso a imagem pode ficar distorcida.

Pode ainda atribuir o valor especial contain para background-size, que faz com que a imagem ocupe todo o espaço disponível, sem que para isso ela seja cortada ou distorcida:

Outro valor especial, cover, é muito utilizado, pois permite escalar a imagem de forma que ela se torna tão larga quanto o necessário para cobrir todo o espaço interno do elemento. Neste caso, se o elemento tiver dimensões diferentes das da imagem, a mesma será cortada de forma que caiba no elemento sem deixar nenhuma área sem preenchimento visível:

Lembre-se que ao redimensionar uma imagem o espaço que não for preenchido por ela no elemento será preenchido por sua cor de fundo.

Attachment

A propriedade background-attachment permite controlar como uma imagem se comporta em relação a barra de rolagem da página ou do elemento no qual ela está contida.

Por exemplo, é possível fazer com que a imagem não acompanhe a rolagem da página, mantendo-se estática em relação ao seu conteúdo:

Outro valor utilizado é local. Considerando que o elemento que contém a imagem possui uma barra de rolagem, a imagem acompanhará essa barra, ignorando a rolagem da página:

Essa propriedade funciona apenas em conjunto com background-image, ou seja, quando atribuímos uma imagem ao elemento.