Publicado em 04/03/2010

CSS: Propriedade Background

As folhas de estilo são fundamentais para controlar a aparência de nossas páginas HTML. Hoje iremos aprender sobre a propriedade Background, responsável pela formatação dos planos de fundo das páginas e elementos.

O background possui as seguintes propriedades:

• background-color: Cor do plano de fundo;
• background-image: Imagem de plano de fundo;
• background-repeat: Define se a imagem deverá se repetir ou não;
• background-attachment: Define se a imagem irá ficar fixa ou rolar junto com a página;
• background-position: define a posição da imagem de plano de fundo (esta propriedade é fundamental para o uso de CSS Sprite);

background-color

Os valores para a propriedade background-color são:
Hexadecimal: #FFFFFF
Código RGB: rgb(250,250,250)
Nome da cor (em inglês): red, blue, green
Transparente: transparent

Tanto o valor hexadecimal quanto o código RGB podem ser colhidos dentro de um programa gráfico, como o photoshop.

background-image

A sintaxe para inserir uma imagem como plano de fundo é: url(pastadaimagem/imagem.gif). Lembre de observar bem o nome da pasta na qual inseriu sua imagem, um único caractere digitado errado e seu plano de fundo não será exibido.

background-repeat

Esta propriedade é utilizada apenas se você fizer uso de uma imagem como plano de fundo. As possibilidades são:

não repetir: no-repeat;
repetir em todos os eixos (horizontal e vertical): repeat;
repeater horizontalmente: repeat-x;
repeater verticalmente: repeat-y;

background-attachment

Para fixar a imagem na tela (efeito marca d’água): fixed;
Para rolar a imagem junto com a página: scroll;

background-position

Esta propriedade é crucial para trabalhar com CSS Sprite (técnica utilizada para otimização de performance dos sites, juntando vários planos de fundo em um arquivo único.

É importante que compreenda que esta propriedade recebe 2 valores, sendo eles referentes aos eixos x e y, respectivamente.

por porcentagem: 50% 50%;
por pixel: 30px 20px; (isso quer dizer que a imagem ficará a 30 pixels de distância do início do eixo x e 20 pixels de distância do eixo y. Estes valores também podem ser negativos (Ex: 10px -45px;). Explicações mais detalhadas em breve.

Para definir alinhamento ao topo, direita, baixo, esquerda e centro basta que utilize sua especificações em inglês (top, right, bottom, left, center). Veja os exemplos abaixo:

background-position: top left; /* alinha a imagem de plano de fundo no topo e na esquerda) */
background-position: bottom right; /* alinha a direita e para baixo */
background-position: center center; /* alinha todo o plano de fundo ao centro */

Otimizando o código CSS

Assim como diversas propriedades das folhas de estilo, é possível resumir todas as informações aqui estudadas em uma única propriedade. Veja o exemplo abaixo:

background: #00FF00 url("images/nome-da-imagem.gif") no-repeat fixed 200px 70px;

Atenção: existem valores que se não forem inseridos o plano de fundo continuará funcionando e os mesmos receberão valores ocultos padrões. É o caso do background-attachment (padrão scroll), background-position (padrão 0 0) e background-repeat (padrão repeat).