Códigos Blog

Pesquisar este blog

Carregando...

Receba atualizações por e-mail:

Paulo Estevão
31 Outubro 2009 às 10:04 AM

Há pouco tempo atrás aprendemos a colocar uma imagem de fundo em seu template. Agora vamos aprender a colocar uma imagem fixa no fundo, de forma que quando descemos a barra de rolagem do navegador, ela continua parada.
Obs.: Código valido para qualquer tipo de site ou blog.

Exemplo: www.twitter.com/pauloestevao e www.pelomarafora.blogspot.com

Se você entende quase nada de CSS e/ou não leu a postagem que ensinava a trabalhar com o fundo do seu blog, aconselho a leitura: Um pouco sobre CSS e Mudando o fundo do seu template

- Faça login no Blogger, entre em “Layout” -> “Editar HTML”.

2º - Procure (Ctrl + f) por:

body {
Dentro das chaves de BODY tem o código CSS: background, isso dá característica da cor de fundo.

3 º - Apague a background de Body e escolha uma das opções abaixo para o novo background do seu blog:
  • Imagem de fundo sem repetir e sem outra cor
Se você quer colocar uma imagem fixa no fundo, sem precisar completar com alguma cor, use o seguinte código:
background: url('http://LINK IMAGEM') fixed no-repeat top left;
  • Imagem de fundo repetindo e sem outra cor
Caso a imagem seja pequena para preencher completamente os espaços, você pode escolher essa opção para a imagem se repetir até completar os espaços vazios:
background: url('http://LINK IMAGEM') fixed repeat top left;
  • Imagem de fundo sem repetir e com outra cor completando
Se a imagem não cobrir completamente o fundo, você pode usar uma cor para completar, dessa forma use essa opção:
background: CÓDIGO COR url('http://LINK IMAGEM') fixed no-repeat top left;
Fazendo as substituições:
LINK IMAGEM -> Coloque o link (direto) da imagem de fundo já hospedado.
CÓDIGO COR -> Coloque o código da cor escolhida (clique aqui e veja uma tabela de cores)

Exemplo (Twitter @pauloestevao):
body {
background: #2952D0 url('http://a3.twimg.com/profile_background_images/42158797/wallpaper-xseven.jpg') fixed repeat top left;
}
- Teste e se tudo ficou como devia ficar... Salve!

Receba nossos posts por feed ou email

Assinar feed

Postagens recomendadas:

9 Comentários:

  1. Brother... valeu mais uma vez... dica simples que faz a diferença!
    ResponderExcluir
  2. Mt Bom Faz Tempo Q EStava a ProCura

    Vlw ai Grande
    ResponderExcluir
  3. umm... vlw

    será que vocês poderiam colocar um tutorial explciando com criar um sistema de formulario de comentario para blog, tipo p/ comentar, Nome, assunto, mensagem....

    Sacas /?

    Vlw
    ResponderExcluir
  4. @blogwsedições,
    nem dá pra fazer isso no blogger.
    ResponderExcluir
  5. Olá,coloquei o codigo assim
    /*---Body---*/
    body {background-image: url(http://i37.tinypic.com/117s1lh.jpg);
    background-position: left center;
    background-repeat: repeat-x;
    background-attachment: fixed}
    background-color: $bgcolor ;
    color:$textcolor;
    border: 5px none #5F4775;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    e olhe como ficou: http://alemaoaddons.blogspot.com/
    como faço para a imagem aparecer sempre
    ResponderExcluir
  6. Poww..adoreiiiiii.....valeu mesmooo!!
    Explicando assim é muito mais facil!
    Abraços!!!
    ResponderExcluir
  7. Valeeeeu...

    eu ja tinha achado alguns fundos prontos,mas não tinha ficado do jeito que eu queria...

    mas ainda falta muitaaaa coisa pra deixar do jeito que eu quero.
    :D
    ResponderExcluir
  8. O meu não ta funcionando de jeito nenhum...
    ResponderExcluir
  9. muito bom meu amigo ! parabens pelo tuto!!!

    você poderia me tirar uma dúvida?
    No meu blog a imagem de fundo parece que fica muito grande, boa parte da imagem nao visualiza acho que pelo tamanho ser um pouco grande... teria algum codigo para deixa a imagem aparecendo inteirinha bem certinha?

    vlw aew amigao e continue com o ótimo trabalho que está fazendo aqui!
    ResponderExcluir

Adicione seu comentário nesse post.
- Não aceito comentários anônimos;
- Não aceito parceria! Caso tenha uma boa proposta, entre em contato;
- Antes de pedir ajuda sobre o tutorial, tente fazer sozinho e tenha certeza que seguiu todas as etapas corretamente.
- Comentários irrelevantes não serão aceitos.

Muito obrigado por sua visita. Volte sempre!

 
 
Blogger
Muitas dicas para você usuário da plataforma Blogger
WordPress
Leia artigos sobre a plataforma de blogs WordPress
Dinheiro
Aprenda várias formas de ganhar dinheiro com seu blog
Design
Modifique e faça agora um blog moderno, único e interativo
Dicas
Várias dicas atuais de como ter um blog de sucesso
 

Onde estamos

Divulgue



Últimas Postagens