Background – Aprenda a colocar um!
Colocar um fundo em uma página é fácil, deixa a página mais bonita, com uma ar mais profissional. Entretanto, cuide com o que você vai colocar no fundo. Se for colocar uma cor, procure uma que combine com o resto da página. Se for colocar uma foto/imagem, também. Tudo o que for fazer procure fazer de uma forma que combine com o todo.
Muitos metablogs já ensinaram a colocar fundo em sites e blogs. Eu já ensinei a colocar em tabelas, agora vou ensinar a colocar em sites e blogs com a ajuda de CSS, é fácil.
Veja outros posts sobre o assunto:
- Imagem de fundo fixa (background) – Códigos Blog
- Gradientes para Backgrounds – Templates Novo Blogger
Como colocar:
Vamos colocar um background em toda a página, para isso pesquise por “body”. Você tem que achar isso, ou algo parecido:
body {
...
}
Procure entre a tag { e } se existe algo parecido com isso (se não tiver, é só acrescentar):
background:...;
Sendo que o que esta em vermelho simboliza um possível conteúdo.
Para colocar somente uma cor no fundo da página você não precisa saber muitos códigos. Veja o exemplo abaixo onde colocarei a cor preta de fundo.
background:#000000;
Você pode utilizar outras cores, entretanto você deve saber os códigos delas. Recomendo que dê uma olhada nessa palheta de cores.
Background de Imagens:
Para colocar imagens o código é esse:
background: url(HTTP://URLDAIMAGEM.COM);
Fácil, não?
Posicionamento de Imagens:
Agora vamos aprender os posicionamentos da imagems:
Y:
- top: A imagem ficará no topo da página;
- bottom: A imagem ficará no final da página;
- center: A imagem ficará no centro da página;
X:
- left: A imagem ficará à esquerda da página;
- right: A imagem ficará à direita da página;
- center: A imagem ficará no centro da página;
Você deve ter percebido que existe dois grupos de posicionamento. O primeiro podemos chamar de Y e o segundo de X.
Vamos ver como ficaria o código na prática, com o posicionamento X = Center e Y = Top:
background: url(HTTP://URLDAIMAGEM.COM) center top;
Viu que fácil? É só colocar o X primeiro e em seguida colocar o posicionamento do Y.
Repetições de Imagem:
Além do posicionamento nós temos a opção de escolher as formas de repetição, que são:
- no-repeat: A imagem não irá repetir;
- repeat-x: A imagem irá se repetir somente na horizontal;
- repeat-y: A imagem só irá se repetir na vertical;
- repeat: A imagem irá se repetir;
Você só irá colocar a tag se quiser repetir em determinada área, exemplo horizontal, ai você utiliza o repeat-x, mas se for para repetir normalmente você não precisa utilizar o código repeat. Exemplo:
background: url(HTTP://URLDAIMAGEM.COM) left top repeat-x;
No exemplo acima a imagem ficará na esquerda e no topo e só irá repetir na horizontal.
Imagem Fixa:
Você também pode deixar, ou não, a imagem fixa. O que acontece com a imagem fixa? Não importa o que você faça a imagem não vai se mexer, nem que você mexa na barra de rolagens ela ficará estática. Para fazer isso incremente o código fixed. Exemplo:
background: url(HTTP://URLDAIMAGEM.COM) fixed;
Imagem e Cor:
Você pode utilizar uma imagem e uma cor, é só juntar os códigos. Exemplo:
background: url(HTTP://URLDAIMAGEM.COM) center top repeat-x #000000;
Gostou? Agora vejamos o que você pode ou não fazer com o código de backgrouns:
- Você pode utilizar uma imagem sozinha, assim como uma cor sozinha;
- Você pode utilizar uma imagem e uma cor, juntas;
- Você não pode utilizar duas imagens;
- Você só pode utilizar um posicionamento de X e Y.
- Você não pode utilizar dois códigos de repeat.
Importante:
Utilize essa ferramenta com moderação. Em caso de você não encontar o body {}, é só criar como no primeiro exemplo, se for no Blogger, crie antes de ]]></b:skin>.
Mas para você que não encontrou essas tags acima, procure por <body> e coloque isso antes do “>”:
style="..."
Agora é só utilizar os códigos que ensinei acima entre as aspas. Não se preocupe com os {}. Se você utilizar nessa forma, o código ficará assim:
<body style="background: url(HTTP://URLDAIMAGEM.COM) center top repeat-x #000000;">
Se tiver dúvidas ou problemas, deixe um comentário.
Cara,excelente dica.
Parabéns pelos artigos!
OBRIGADOOOOOOO!!!!!!!!!!!
kkkkkkkkkkkkkkkkkkkkk
me ajudou bastanteeeeeeeee