Cores e Cores de Fundo

Todo elemento HTML pode ter uma cor e uma cor de fundo. No exemplo que vimos anteriormente, já trabalhamos no CSS com as propriedades color e background-color. Elas podem ter valores em nomes de cores em inglês, como white, blue e navy, ou valores de cores em hexadecimal.

Cores em Hexadecimal

Um código de cor em hexadecimal define exatamente a composição de uma cor pela proporção de mistura entre vermelho, verde e azul. Um código hexadecimal de cor possui o identificador # e seis caracteres de 0 a F (depois do 9 começa o A, B, etc...). Vermelho em hexadecimal por exemplo é #FF0000. Vários programas de editoração de imagens como o Photoshop, GIMP e Inkscape trabalham com cores em Hexadecimal.

body {
    background-color: #000000;
    color: #008000;
}

O exemplo acima é exatamente o exemplo que vimos anteriormente, mas com cores em hexadecimal. O fundo é preto, a cor é verde.

Imagens de Fundo

Além de cores, é possível determinar imagens como fundo nos elementos, com diversas configurações possíveis. A mais simples é apenas uma imagem, posisionada à esquerda e acima como fundo no elemento, sem repetições, como no exemplo abaixo:

O fundo desse texto é uma imagem!

Nesse exemplo, a imagem utilizada foi essa (clique para abrir). Usei um truque (que você aprenderá depois) para limitar o tamanho do elemento com o texto. Você pode notar que apenas uma parte da imagem, que é do tamanho do elemento, aparece. Se a imagem for maior que o elemento, uma parte dela será oculta.

Segue um exemplo para adicionar um fundo similar a uma página:

body {
    background: url(images/exemplo_fundo.jpg);
}

A imagem é referenciada por um endereço, que geralmente aponta para uma estrutura de pastas. No exemplo acima, se o seu HTML estiver em uma pasta, a imagem estaria dentro de uma pasta images, e teria o nome exemplo_fundo.jpg. Veja abaixo um exemplo:

Posicionamento de Imagens de Fundo

Talvez uma das coisas mais úteis no controle de fundos pelo CSS é o controle de posição do fundo. Nos exemplos abaixo, utilizo a propriedade background-position para controlar como o fundo do exemplo acima será aplicado:

O fundo desse texto é uma imagem!

body {
    background: url(images/exemplo_fundo.jpg);
    background-position: top right;
}

O fundo desse texto é uma imagem!

body {
    background: url(images/exemplo_fundo.jpg);
    background-position: bottom left;
}

Alterando os valores da propriedade é possível orientar a imagem para baixo (bottom), e para a direita (right). Por padrão, os fundos vem como top left (acima e a esquerda)