Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1506116117
Vida do cache: 1506159317
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

layouts

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!



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

20 Comentários

  1. Badtom disse:

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

  2. jhonatanplay disse:

    Mt Bom Faz Tempo Q EStava a ProCura

    Vlw ai Grande

  3. blogwsedicoes disse:

    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. Paulo Estevão disse:

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

  5. Alemão Downloads disse:

    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. Ebaar_Hátor disse:

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

  7. Bia Festas e Eventos disse:

    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.
    😀

  8. Maria Claudia Müller disse:

    O meu não ta funcionando de jeito nenhum…

  9. Guto disse:

    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!

  10. PriMEiRo B disse:

    E SE A IMAGEM FOR EM HTML??

  11. Paulo Estevão disse:

    Como assim imagem em HTML?

  12. Angelo disse:

    Oi, infelismente e felismente ao mesmo tempo eu migrei para WordPress, como eu faço uma imagem fixa no WordPress ?

  13. wennio disse:

    Muito legal adorei mesmo!!!! valeu amigos

  14. Heloísa disse:

    Adorei, muito obrigada, perfeito!

  15. RAMON SOUZA disse:

    affs eu coloquei isso no meu blog e ele ficou todo misturado os gadgets tudo errado ficou tudo errado affs odiei o post agora vou ter que recomecar tudo de novo o meu blog
    🙁

  16. Marcos disse:

    Valeu Mesmo , Muito Obrigado

  17. Alvaro disse:

    Ola. Tentei inserir outro background através de uma url do Picasa pela sua dica e nada adiantou. Ele mantém a foto atual e substitui por branco dos lados, algo muito estranho. O meu Blog é pelo Blogger normal. O que faço?
    O meu endereço do Picasa do link da foto mostra o seguinte: https://picasaweb.google.com/lh/photo/?feat=directlink – É isto tudo mesmo que devo utilizar? Ou estou a inserir no lugar errado?
    Obrigado!

  18. Isabelle disse:

    Valeuuuu, ajudou demais. Estou fazendo meu template sozinha.
    Obrigada!!!

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.