1, 2, 3 ou 4 Backgrounds no Template


http://www.weheartit.com
Olá! E muito obrigada a todos que acompanham o Reino Kawaii, tanto no blog, que chegou a +600 nobres amigos, quanto nas redes sociais! Eu estou super feliz em contar com vocês!
Bom, este post será sobre como utilizar em um mesmo layout 1 ou mais de 1 background, conforme vocês devem ter notado nos últimos templates que fiz. Vamos lá?
1. Adicionando Background ao Template
Existem 2 modos. O primeiro é acessar Modelo - Personalizar - Plano de Fundo, e escolher entre as imagens do Blogger ou Fazer Upload de uma imagem salva em seu computador.
O segundo modo é pelo HTML. Geralmente, a área voltada ao background ou plano de fundo (e outras coisas), aparece do seguinte modo em templates do Blogger:
body {
  font: $(body.font);/* tipo e tamanho da fonte para o blog */
  color: $(body.text.color); /* cor do texto no blog*/
  background: $(body.background); /* plano de fundo */  
}
Nos interessa aqui mudar a parte do background, que se transformará em:
 body {
  font: $(body.font);/* tipo e tamanho da fonte para o blog */
  color: $(body.text.color); /* cor do texto no blog*/
  background: url(URL DA IMAGEM) repeat; /* plano de fundo */  
} 

Caso queira adicionar 1 cor como plano de fundo, no lugar de background: url(URL DA IMAGEM) repeat; coloque background: #CÓDIGO DA COR; e se quiser que o background não repita, deixe assim: background: url(URL DA IMAGEM) no-repeat;

2. Usando 2 Backgrounds:

Encontre o primeiro código ao qual me referi acima. Encontrou? Agora o substitua por:
body, html {
     height: 623px;
     margin: 0;
     padding: 0;  }
body {
    font: 12px arial,verdana,sans-serif;
    color: #c1c1c1;
    padding:0px;
    margin:0px;
    text-align: justify;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5zAuUtWRFbIgPN4D16F0j-FlejE4nElXOHlqdLm4I6q94NDiy6KNbWBtiFbRv6-HfuUpqNBeQiRdSxOFjJm011iggphUTAz04S9QXKQvXrHXs7oOh9mRIg-6GIJStvcDgM8Jvncjd3Y/s1280/headernatal.png) no-repeat  scroll top;}
    html {
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGshqdbbJM6Iw5WY6CVkCEeOJcrWaSzsI-bSZKfXrvHPC8MZEjeAzpmiV1MKT1Qp5F2r6m9Om6c4JoocXVT8grYVTPvF21P48u0hqwXdhFRsQbLgM3vebB2cccf8SBCj2NX10WlQR2Y1Zu/s1600/bc3new.png") repeat;
 }

Note no código acima que:
- em height: 623px; é o tamanho do primeiro background e você poderá substituir os links da imagem. Este código é idêntico ao do template de Natal que disponibilizei ontem, ou seja, já está prontinho para você e é legal porque você pode usá-lo com o 1º background como cabeçalho, integrando-o a área de postagem e sidebar :3 Para ficar mais bonitinho, remova o gadget header (como mostrei aqui no template free de ontem).
Aprendi no Cherry Bomb e modifiquei ao meu gosto ^^

3. Usando Mais de 2 Backgrounds

Lembra do Nyanpire Cat Template? Nele há 1 background geral, mas há também opção do leitor deixar o plano de fundo de acordo com seu gosto. O background geral é feito como no segundo código de início deste post; para adicionar mais três, com opção de trocar de plano de fundo com um click, leia este tutorial do Trashy Girl. Lá vocês poderão entender o código todo ok?
É isso ^-^ Com um pouco de atenção e paciência dá para modificar tudinho e acrescentar muitas coisas.Se quiser imagens de backgrounds, veja aqui no Reino Kawaii:
Beijinhus e te vejo mais tarde;3






Postar um comentário

11 Comentários

  1. aai tava doida pra aprender esse tutorial! ^^ Rô você me Salvou ! rsrsrs

    ResponderExcluir
    Respostas
    1. Que bom que pude ajudar :3
      Beijus e obrigada!!

      Excluir
  2. Essa eh facil peguei o tutorial no Kawaii World, mas realmente eh bem pratico e preciso ^^
    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  3. Adooreii Muito obrigada Roberta...
    http://mundinhosuperkawaii.blogspot.com.br/

    ResponderExcluir
  4. Como faço pra deixar um background na vertical pq ai no caso de usar 2 back, os 2 estão na horizontal e eu qr um na horizontal e outro na vertical... e daí como faz???
    BjoO!

    ResponderExcluir
    Respostas
    1. Bom, eu usaria uma imagem pronta na horizontal, como por exemplo um cabeçalho, e outra na vertical, tipo um background que desse essa impressão, como os com listras verticais. Aí era só substituir as URLs das imagens conforme o tutorial.
      Mas no HTML, você pode usar após cada URL algo como:
      background: url(URL DA IMAGEM) repeat-x; para repetir na horizontal ou...
      background: url (URL DA IMAGEM) repeat-y; para repetir na vertical.
      Mas esse repeat-x ou repeat-y é ideal para usar em imagens pequenas, não no caso de um cabeçalho, o qual deveria ficar mais ou menos assim:
      background: url(URL DA IMAGEM) no-repeat;
      Bjus...

      Excluir
  5. helooo........ tbh i love your blog. but im not understand the articles and tutorials. can you post the tutorial in english ?

    ResponderExcluir
    Respostas
    1. Hello ^^ And thanks! I don't speak English perfectly, but I'll try :3
      You can use the translator in sidebar ^^
      Kisses...

      Excluir
  6. Eu queria colocar background no rodapé como está aqui no seu... e não acho tutorial ... omeu templante já é 2 background... queria deixar meu rodapé do blog com outra cor... como faço? Pode me responde por favor?!
    bjos

    http://www.divaemaquiada.com.br/

    ResponderExcluir
    Respostas
    1. Você pode alterar a parte do HTML do template .footer-outer, acrescentando um background, tipo...
      .footer-outer {
      background: #cor ou url(URL-DA-IMAGEM);
      Aí pode especificar altura e largura também...dá uma olhada no post Codificando um Layout PSD, tem uma parte mostrando como personalizar o rodapé.
      Bjuu..

      Excluir
  7. o bri ga da!
    Seu tutorial foi o único que funcionou no meu blog, obrigada mesmo, vou usar vários outros para aprender mais sobre HTML.
    Beijo :D

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up