Imagem de Fundo Degrade no Blog

Um tipo de fundo de página que pode produzir um efeito visual muito interessante é o degrade no topo da página ou seja o site começa com fundo de uma cor e vai mudando para outra que ocupara a página inteira, mas como fazer isso? Pode acreditar é mais fácil do que parece.
O primeiro passo é escolher as cores que você usará, então faça uma imagem degrade dessas cores, mas não precisa ser uma imagem com muita largura, sugiro 10 pixels pois ela se repetira horizontalmente no topo da página, quanto a altura da imagem isso depende da sua vontade pois é o tamanho que terá o degrade. Contudo se em vez de usar um degrade com cores você preferir usar uma textura a largura da imagem terá que ser do tamanho da textura. Depois da imagem pronta é só hospedar em algum lugar, por exemplo no http://imageshack.us.
O código para colocar esse fundo degrade no seu site ou blog é:

background-color: #FFCC99;
background-image: url(degrade.jpg);
background-repeat: repeat-x;

Coloque o endereço da imagem no lugar indicado e no lugar de #FFCC99, coloque a cor da parte debaixo da imagem degrade que você fez, veja uma tabela com o código das cores. A ultima linha do código faz que a imagem se repita somente na na direção horizontal da página dando a impressão que o fundo é degrade.
No Blogspot vá até a página layout, editar html e coloque o código na parte do .body{..........
......
.......}

Veja também:

Onde e como hospedar imagens
Problemas com imagens que não aparecem no blog
Programas grátis para editar ou fazer imagens

9 comentários :

  1. OLÁ!! ADOREI A DICA... MAS DESCULPE NÃO CONSEGUI ENTENDER!!
    gostaria de colocar um degrade em tons de rosa, lilas... para meu blog de artesanato, mas não consegui.
    pode me ajudar???
    outra perguntinha:
    coloco no meu blog trabalhos que faço em croche e pintura, mas tbm posto os graficos de croche e riscos de pintura para quem quiser fazer. gostaria que esse graficos ficassem em outra página separada, e não junto com os trabalhos prontos... acho que eu poderia chamar isso de redirecionamento.
    como faço??
    pode me ajudar??
    obrigada por sua atenção!parabéns pelo blog!! ele é ótimo!

    ResponderExcluir
  2. coloque esse código pela pagina editar html.
    veja se o endereço da imagem está correto

    no Blogspot verifique se no código do body tem:

    background:$bgcolor;

    se tiver apague antes de colocar o código do fundo degrade pois isso define a cor de fundo

    ResponderExcluir
  3. Eu entendi tudo, só não consegui entender onde entra esse código lá no meu template.
    Obrigada.

    ResponderExcluir
  4. bia esses código você coloca pela pagina editar html

    ResponderExcluir
  5. onde coloca-se o link na pagina editar html??? porque se colocar em qualquer lugar não funciona!!

    ResponderExcluir
  6. não entendi bem,
    tenho muitas gifs no meu blog ,mas
    todas com fundo branco e,é muito feio,como tirar o fundo branco das imagens gifs que eu copiei?

    ResponderExcluir
  7. Cely
    tem que hospedar o gif em algum site, sugerimos o imageshack e depois colocar o endereço da imagem no local indicado no código

    ResponderExcluir
  8. Oie!!!
    Estou tentando colcoar o degrade, mas nãoe stou conseguindo... vou dar um ctrl-v de como ficou, dai vc me diz o que está errado, ok?

    body {
    margin:0;
    background-color: #8B3A3A;
    background-image: http://img404.imageshack.us/img404/6829/degrade5.jpg (degrade.jpg);
    background-repeat: repeat-x;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    ResponderExcluir
  9. o correto é assim a linha do background

    background-image: url(http://img404.imageshack.us/img404/6829/degrade5.jpg);

    ResponderExcluir