Fundo HTML

Um bom fundo faz com que o site pareça especialmente bom.

Exemplo

Boa combinação de cor de fundo e cor do texto
Um exemplo de boa combinação de cor de fundo e cor do texto, tornando a leitura do texto fácil na página.
Má combinação de cor de fundo e cor do texto
Um exemplo de má combinação de cor de fundo e cor do texto, tornando a leitura do texto difícil na página.

(Mais exemplos podem ser encontrados na parte inferior da página.)

Fundo (Backgrounds)

<body> Possui dois marcadores de configuração de fundo. O fundo pode ser uma cor ou uma imagem.

Cor de fundo (Bgcolor)

A propriedade de cor de fundo define a cor de fundo. O valor pode ser um número hexadecimal, um valor RGB ou um nome de cor.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

O código acima define a cor de fundo como preta.

Fundo (Background)

A propriedade de fundo define o fundo como uma imagem. O valor da propriedade é a URL da imagem. Se o tamanho da imagem for menor que a janela do navegador, a imagem será repetida ao longo da janela do navegador.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

A URL pode ser um endereço relativo, como na primeira linha de código. Também pode ser um endereço absoluto, como na segunda linha de código.

Dica:Se você planeja usar imagens de fundo, lembre-se dos seguintes pontos:

  • A imagem de fundo aumentou o tempo de carregamento da página. Dica: os arquivos de imagem não devem exceder 10k.
  • A imagem de fundo combina bem com outras imagens na página?
  • A imagem de fundo combina bem com a cor do texto na página?
  • Como parece a imagem estendida na página?
  • A atenção aos textos foi distraída pela imagem de fundo?

Considerações Básicas - Dicas Úteis:

As propriedades de cor de fundo (bgcolor), fundo (background) e texto (text) no <body> tag foram descontinuadas no padrão HTML mais recente (HTML4 e XHTML). W3C removeu essas propriedades em suas recomendações padrão.

Deve-se usar a folha de estilo em cascata (CSS) para definir o layout e as propriedades de exibição dos elementos HTML.

Mais Exemplos

Imagem de fundo de alta acessibilidade
Exemplos onde a imagem de fundo e a cor do texto tornam o texto da página fácil de ler.
Imagem de fundo de alta acessibilidade 2
Outro exemplo onde a imagem de fundo e a cor do texto tornam o texto da página fácil de ler.
Imagem de fundo de baixa acessibilidade
Exemplos onde a imagem de fundo e a cor do texto tornam o texto da página difícil de ler.