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!
Brother… valeu mais uma vez… dica simples que faz a diferença!
Mt Bom Faz Tempo Q EStava a ProCura
Vlw ai Grande
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
@blogwsedições,
nem dá pra fazer isso no blogger.
Funciona sim
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
Poww..adoreiiiiii…..valeu mesmooo!!
Explicando assim é muito mais facil!
Abraços!!!
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.
😀
O meu não ta funcionando de jeito nenhum…
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!
E SE A IMAGEM FOR EM HTML??
Como assim imagem em HTML?
Oi, infelismente e felismente ao mesmo tempo eu migrei para WordPress, como eu faço uma imagem fixa no WordPress ?
Angelo,
é o mesmo código. A diferença é que você vai inserir na página style.css dentro do editor “Aparência” do blog.
abraços
Muito legal adorei mesmo!!!! valeu amigos
Adorei, muito obrigada, perfeito!
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
🙁
Valeu Mesmo , Muito Obrigado
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!
Valeuuuu, ajudou demais. Estou fazendo meu template sozinha.
Obrigada!!!
Obrigado!