Colocar fundo degradê na página

Publicado em: 16/08/2004
Atualizada pelo Maujor em: 18/03/2005

Introdução

Nota: Com uso da funcionalidade gradiente prevista nas CSS3 você obtém fundo degradê sem uso de imagens

Neste tutorial mostro como construir e colocar um fundo degradê em uma página web, usando uma imagem e a propriedade CSS background.

A construção do fundo no Fireworks

Vou mostrar como construir o fundo degradê usando o Fireworks.

Use o seu editor preferido.

1-) Abra o FW e tecle Ctrl + N para abrir um novo documento;

2-) Ajuste as dimensões do palco para 10px x 700px e cor transparente;

Screenshot do painel Fireworks para ajuste de canvas

1-) Desenhe um retângulo com as dimensões do palco e aplique o preenchimento degradê;

Screenshot do painel Fireworks para ajuste de degrade

Ajuste o degradê e salve com a extensão .jpg

Neste tutorial salvei como bgdegrade.jpg

Imagem degrade pronta

A regra CSS

Esta é a regra CSS que coloca o degradê como fundo da página

<style type="text/css">
body {
  background:#02CBFF url("bgdegrade.jpg") 
  top left repeat-x fixed;
     }
</style>

Nota: Defina também uma cor para o fundo que ofereça contraste com os textos na página, pois se por acaso a imagem do fundo não for carregada no browser do usuário você garantirá a legibilidade da página.
Imagine um fundo degradê em cor escura onde você projetou textos em cor branca. Se a imagem de fundo não for carregada o fundo assumirá uma cor clara (em geral branca) e os textos ficarão invisíveis.
Nesta dica adotei a cor alternativa para o fundo #02CBFF (azul claro)

A página com o fundo aplicado

Veja a página web com o fundo degradê deste tutorial. Veja também o código fonte da página.

E, a mesma página sem o carregamento do fundo degradê.

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3