Códigos Blog via Celular!

Imagem de fundo fixa (background)

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

1º - 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;
}
4º - Teste e se tudo ficou como devia ficar... Salve!

Paulo Estevão, cursa Engenharia de Computação na faculdade PUC de Goiás. Blogueiro e Twiteiro nas horas vagas. Louco por internet, tecnologia e design. Apesar de geek é a apaixonado em esportes de uma forma geral.

Receba automaticamente novidades via email ou RSS.
Arquivado dia 31 Outubro 2009 às 10:04 AM
Marcadores:
6 Comentários
Leia também:

6 Comentários:


  1. Brother... valeu mais uma vez... dica simples que faz a diferença!


  2. Mt Bom Faz Tempo Q EStava a ProCura

    Vlw ai Grande


  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


  4. @blogwsedições,
    nem dá pra fazer isso no blogger.


  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


  6. Poww..adoreiiiiii.....valeu mesmooo!!
    Explicando assim é muito mais facil!
    Abraços!!!

Leia antes de Comentar:

  • Os comentários deste blog são todos moderados;
  • Escreva apenas o que for referente ao tema;
  • Ofensas pessoais ou spam não serão aceitos;
  • Não faço parcerias por meio de comentários;
  • Faça comentários relevantes;
  • Para entrar em contato acesse nosso formulário de contato;
  • Obrigado por sua visita e volte sempre.

Assinar: Postar comentários (Atom)