HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Plano de Fundo

O elemento <body> possui atributos que nos permitem especificar a cor de fundo.
Também podemos usar uma imagem como padrão de fundo.

O atributo bgcolor, que deverá ser inserido dentro da tag de abertura body, permite definir a cor do plano de fundo da página. Quando não indicado o navegador exibe cor padrão (branca).

A sintaxe poderá ser de uma das seguintes formas:
bgcolor="XXXXXX" onde XXXXXX é o código hexadecimal da cor, formado pela combinação de 6 dígitos do sistema hexadecimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) - exemplo: #FF0000.
É possível formar o código utilizando apenas 3 dígitos (notação abreviada) - exemplo: #F3A. Na notação abreviada cada um dos 3 dígitos é dobrado automaticamente pelo navegador (#FF33AA).
bgcolor="rgb(X,Y,Z)"  r, g e b são abreviações de red (vermelho), green (verde) e blue (azul) respectivamente, e X, Y e assumem valores de 0 (zero) a 255 ou percentagens de 0% a 100%.
Exemplos:
rgb(0,50,255)
rgb(0%,30%,100%
bgcolor="XXXX"onde XXXX é o nome da cor na língua Inglesa.

Exemplos: todas as formas abaixo resultam em cor branca para o fundo da página.
<body bgcolor="#FFFFFF">
<body bgcolor="rgb(255,255,255)">
<body bgcolor="WHITE">


Exemplos de Cores com Nomes Atribuídos Oficialmente:
click no botão para exibir o código hexadecimal correspondente

 


Plano de fundo com figuras

Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, pode-se colocar uma imagem como plano de fundo. Com isso você pode criar um site muito mais bonito, porém evite imagens muito pesadas para que o carregamento da página não se torne muito demorada.
BACKGROUND - define uma imagem como plano de fundo, sendo que se o tamanho da imagem for menor que a página ela será repetida de forma a preencher todo o espaço da página. Pode ser do tipo GIF,  JPG, PNG.

O valor do parâmetro BACKGROUND é um URL (endereço) que define o local (servidor) onde pode ser encontrada a imagem.
Exemplos:
com URL relativo:      <body background="/kit/tutorial/css/images/miniaturas/image2.gif">
com URL absoluto:  <body background="http://www.kithomepage.com/kit/tutorial/css/images/miniaturas/image2.gif">


Legibilidade e psicologia
Uma cor ou uma imagem de fundo bem escolhidos podem melhorar o aspecto da página, mas uma má escolha é capaz de causar danos graves na legibilidade e no aspecto geral. É importante escolher bem as cores do texto e do fundo.

Um estudo feito na Universidade do Texas sobre legibilidade em função das cores do texto e plano de fundo apresentou o seguinte resultado:

Mais Legiveis

Menos legiveis

Branco sobre preto

Verde sobre vermelho

Cinza sobre preto

Azul sobre magenta

Amarelo sobre preto

 

Preto sobre branco

 

Branco sobre azul

 

Azul sobre branco

 

Como é fácil notar a cor preta está presente em três combinações entre as mais legíveis, porém é uma cor que evoca sensações negativas muito fortes na psicologia humana. Ao escolher uma cor é bom observar o simbolismo que ela exerce sobre a psique humana. A tabela a seguir associa sensações positivas e negativas as cores, obviamente a cultura dos povos altera o significado das cores, por exemplo, no Japão a cor branca representa luto.

Cor Sensações positivas Sensações negativas
Vermelha: Paixão, energia, amor, força, ação Sangue, guerra, perigo, agressividade
Verde: Natureza, primavera, fertilidade, dinheiro, tenacidade Inexperiência, inveja
Amarelo: Sol, verão, ouro, otimismo, disponibilidade, altruísmo Doença, covardia, perigo
Azul: Estabilidade, calma, unidade, satisfação, harmonia, fidelidade, céu, mar Depressão, conservadorismo
Branco: Neve, pureza, inocência, paz Frio, hospital, estéril
Cinza: Inteligência, dignidade, maturidade Sombra, enfadado, depressão
Preto: Potencia, formalidade, profundidade, estilo Maldade, temor, morte, anonimato

Na Caixa de Teste abaixo você poderá configurar e testar um plano de fundo.
Para plano de fundo com figuras utilize um endereço de qualquer imagem da Internet (URL completo) ou utilize o endereço a seguir:  /images/num/image2.gif

Caixa de Teste: