CSS: Plano de Fundo (Background)

Hoje vamos iniciar a parte de estilização de páginas usando o CSS. Começaremos pelo background, ou em português, o plano de fundo.

Irei passar por cada atributo que você pode alterar de um plano de fundo individualmente, começando pelo:


1. Cor de Fundo
Para alterar a cor de fundo, usamos a seguinte declaração como exemplo:


background-color:red;

Existem três formas de definir a cor que queremos, a usada neste exemplo é usando o nome em inglês. As outras são usando o valor hexadecimal do código e outro o valor RGB. Os outros dois são usados da seguinte forma:

background-color:#FF0000;
background-color:rgb(255,0,0);

Exemplos práticos:

h1{background-color:#6495ed;}
p{background-color:#e0ffff;}
div{background-color:#b0c4de;}

2. Imagem de Fundo
Aqui aprenderemos a utilizar uma imagem externo como plano de fundo. Para isso, temos a seguinte declaração:

background-image:url('paper.gif');

onde "paper.gif" é a nossa imagem que queremos colocar. Lembrando sempre que é usado o caminho relativo do mesmo.

Exemplo Prático:
body {
background-color:#FF0000;
background-image:url('paper.gif');
} 

2.1 Repetição de Imagem de Fundo
Utilizado quando precisa preencher toda a área da tela com a imagem. Caso não seja definido, o navegador entenderá que deve preencher tanto verticalmente quanto horizontalmente. O comando que controla essa repetição é o background-repeat, que pode assumir os seguintes valores:

• repeat: Repete a imagem tanto na vertical quanto na horizontal. É o valor padrão;
• repeat-x: Repete a imagem somente na horizantal, esticando verticalmente para preencher;
• repeat-y: Repete a imagem somente na vertical, esticando horizontalmente para preencher;
• no-repeat: Não repete a imagem.

Exemplo:

body {
background-color:#FF0000;
background-image:url('paper.gif');
background-repeat:no-repeat;
} 

2.2 Posicionando a Imagem de Background
Você tem a imagem de fundo, mas não quer que ela fique na posição, quer que ela fique alinhada em outro lugar. Então para isso usamos o comando background-position. Existe três formas para atribuir valores ao background-position, todas elas envolvem em primeiro dizer onde vai ser o alinhamento horizontal, e o segundo indicar o alinhamento vertical: 

O primeiro é usando o alinhamento combinando as palavras {left, right, center} com {top, center, bottom}. A imagem a seguir, mostra onde a imagem será alinhada:

Exemplo:
background-position:center center;

A segunda forma é indicando a posição em relação ao uma porcentagem. A ideia é a mesma que falei na primeira dica do artigo sobre adaptação em dispositivos móveis. Você atribui a porcentagem da posição que você deseja e assim, independente do tamanho de tela, ela sempre estará naquela posição relativa.

Exemplo: 
background-position:50% 50%;

O terceiro modo é utilizando uma das outras unidades de medidas permitidos no CSS, que possuem valores absolutos em relação ao tamanho de tela, como por exemplo, pixels:

background-position:50px 50px;

Adicionando ao nosso exemplo:

body {
background-color:#FF0000;
background-image:url('paper.gif');
background-repeat:no-repeat;
background-position:center center;
}  

2.3 Fundo de Imagem Fixado
Esse comando é útil quando você tem uma página grande em que é necessário barra de rolagem. Quando rola a imagem, por padrão, o plano de fundo também rola junto. Caso queira fixar a imagem de fundo para que não role, você deve usar o comando background-attachment, que pode assumir os seguintes valores:

• scroll: é o padrão, em que a imagem rolará junto com a página;
• fixed: em que a imagem será fixa.

Exemplo de uso:

body {
background-color:#FF0000;
background-image:url('paper.gif');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
} 

3. Configuração Rápida
A configuração rápida é um comando que serve para resumir vários de uma vez. Todos os comandos vistos acima pode ser configurados através do comando background. Como valores para o comando background, você tem que indicar as configurações na seguinte ordem:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Ou seja, eu posso transformar esse comando:

body {
background-color:#FF0000;
background-image:url('paper.gif');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}  

em:

body {
background:#FF0000 url('paper.gif') no-repeat fixed center center;
} 
Uma das coisas que tem que ter em mente é que não importa se você deixou de declarar um deles, contanto que os valores estejam na ordem indicado.

4. Conclusão
Entçao chegamos ao fim do tutorial sobre Background do CSS. Ainda temos bastante conteúdo para ver, portanto não deixe de acompanhar o blog. Até mais.