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
background: url('http://LINK IMAGEM') fixed no-repeat top left;
- Imagem de fundo repetindo e sem outra cor
background: url('http://LINK IMAGEM') fixed repeat top left;
- Imagem de fundo sem repetir e com outra cor completando
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 {4º - Teste e se tudo ficou como devia ficar... Salve!
background: #2952D0 url('http://a3.twimg.com/profile_background_images/42158797/wallpaper-xseven.jpg') fixed repeat top left;
}
Artigos Relacionados:
5 Comentários:
Postar um comentário
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!
Assinar:
Postar comentários (Atom)




31 de Outubro de 2009 06:31
Brother... valeu mais uma vez... dica simples que faz a diferença!
1 de Novembro de 2009 13:41
Mt Bom Faz Tempo Q EStava a ProCura
Vlw ai Grande
6 de Novembro de 2009 11:46
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
7 de Novembro de 2009 14:06
@blogwsedições,
nem dá pra fazer isso no blogger.
15 de Novembro de 2009 23:01
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