Vídeo não pode ser exibido.

Códigos Blog via Celular!

Anúncio

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

- 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!

8 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!!!


  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


  8. O meu não ta funcionando de jeito nenhum...

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.

Voltar ao topo