Dois backgrounds no blog

|
Olá cherries! Já deram os parabéns para as suas mamães hoje? Espero que sim hein? u.u
Desde que eu voltei com o blog, vocês têm pedido para eu ensinar a fazer essa faixa rosa e verde que cobre todo o blog, e hoje eu vou mostrar. Esse tutorial já é conhecido na web, mas talvez vocês não tenham se dado conta de que eu uso ele. Vejam a imagem:


Entederam? Eu uso um primeiro background que tem a faixa, e é da mesma altura do cabeçalho, assim as imagens se completam. E o segundo background que eu uso é o cinza simples, que cobre todo o resto do blog. Legal né? Veja agora o código que você deve usar para fazer isso.

1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
 3°) Apague tudo e coloque no lugar este código:
body, html {
 height: 300px;
 margin: 0;
 padding: 0;  }

body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }

html {
 background: url("URL do 2º background") repeat; }
Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.
Gostaram? Esperem que ainda não acabou! Fiz três conjutos de backgrounds para vocês usarem nesse tuto. Peguem a vontade, mas quando usarem dediquem um espacinho do seu blog para por os créditos ao cherry bomb. ;)

Conjunto 1




Conjunto 2



Conjunto 3



Antes de terminar, só lembrando que a segunda batalha de blogs já está online lá no face do blog, e vocês já podem escolher o destaque desta semana.
Por hoje é isso! Feliz dia das mães ^^
Kissus,
Liah

86 comentários

  1. Adorei!
    http://cherry-stephane.blogspot.com.br/

    ResponderExcluir
  2. Amei a dica amoore!
    www.cereja-com-morango.blogspot.com

    ResponderExcluir
  3. Brigada! Eu estava precisando mesmo!
    Dê uma olhada de como ficou:
    memories-diario.blogspot.com

    ResponderExcluir
  4. Postar conjunto masculino pf
    Agradeço deste já
    http://blogger-boysattitudes.blogspot.com.br/

    ResponderExcluir
  5. Amei! Vou usar esse tutorial no meu próximo layout!

    http://timemachine-br.blogspot.com.br/

    ResponderExcluir
  6. Muito lindo *-* No meu próximo lay to pensando em colocar *.*
    http://garotasmalvadas.blogspot.com.br/

    ResponderExcluir
  7. Amei, era o que eu estava procurando a tempos!. Obrigada Liah! <3

    ResponderExcluir
  8. Adorei os tutos e as combinações, vou usar isso no meu próximo lay :33

    http://thecherrypunk.blogspot.com/

    ResponderExcluir
  9. Adoreeeeeei *---*
    Eu não tinha achado que era 2 backgrounds, e sim que o cabeçalho era assim e que com algum código ficava poor toda tela ^^
    Estranho, seu cabeçalho são várias imagens O.o
    Garota do olhar sincero

    ResponderExcluir
  10. Ah eu já sabia desse tuto, até já usei lá no blog. Acho que o efeito fica muito lindinho, vale a pena ^.^ Beijos ♥

    Garota de All Star

    ResponderExcluir
  11. Amei o tuto' já vou fazer no meu blog ><'
    Como vc colocou essa borda no post igual folha de caderno?' faz um tuto?' pf *.*'

    ResponderExcluir
  12. Já vi em algum lugar esse tuto...
    Acho que foi no velho Menina Nerd! (rs) Muito bom.
    E eu ju-ra-va que essa barrinha era parte do cabeçalho! Nem me liguei que era um back, rsrs
    Obrigada pela visita lá no blog :3
    Rebel Cinderella

    ResponderExcluir
  13. Hhmmm, que legaal....gostei do tuto...
    ah, ja postei o resultado do look que escolhi, veja se vc acertoou...
    Bjss

    http://espacofemininoaqui.blogspot.com.br/2012/05/e-eu-fico-com-o.html

    ResponderExcluir
  14. oi eu queria um tutorial : como colocar imagem no nome do blog obrigada

    ResponderExcluir
  15. Aiin Liah, que bom que vc voltou a postar, smepre entrava aqui no blog pra ver se vc tinha decidido voltar, haha'. Fiz um lay novo no blog com 2 backgrouds no blog também, e eu consegui pq vc me ajudou ^^ ... enfim, ve se vc gosta do meu lay

    bjookas ^^

    http://tictacgirls.blogspot.com.br/

    ResponderExcluir
  16. Demais, como sempre *--* Amei!

    [uprisingteen.blogspot.com.br]

    ResponderExcluir
  17. Oii, eu queria saber como que coloca o nome do blog na area da postagem igual nesse blog http://tumblr2bloggerlayout.blogspot.com.br/ se você me ensinasse como é que se coloca, ou me passar o link da onde vc tirou esse tuto, porque eu procurei em todo lugar e n achei
    Obrigada *


    http://paradise-bieber.blogspot.com.br/

    ResponderExcluir
  18. Adorei o tutorial, Liah você arrasa SEMPRE! Adoro seu blog. Depois eu vou tentar. Adorei você ter voltado com o blog.

    Layla
    www.blogsaiudoforno.blogspot.com

    ResponderExcluir
  19. Esse comentário você lê e apaga ~porque ele vai se auto destruir em 1h, kkk~. Então, meu blog já vai fazer um ano em julho, e eu queria fazer uma série de entrevistas com pessoas que são especiais para o blog, e queria saber se você quer participar! Sei que você não vai muito lá, mas o Chery Bomb sempre foi a inspiração do meu blog, e você é a minha blogueira favorita, eu ia adorar se você participasse! Se você quiser, me avisa lá no blog que eu vou mandar as perguntas, e como eu só vou postar no fim de junho/começo de julho, vou poder te mandar depois de pronto para você ver antes de eu postar. Quer participar? Espero que sim!

    Layla
    www.blogsaiudoforno.blogspot.com

    ResponderExcluir
  20. Amei a dica! Com certeza vou usar no próximo design do blog, só não entendi muito bem como que funciona. Mas fica lindo!!!
    Kissus ----> Blog Bola de Chiclete.com

    ResponderExcluir
  21. Lindos os conjuntos,adorei o post já tinha visto mais só você tem o jeitinho Cherry de explicar U.U

    ;D ----> Uma Rebelde

    ResponderExcluir
  22. Liah! Lembra de mim? rsrs... Eu preciso de uma ajudinha sua. Am, como você colocou aquele título dizendo WELCOME e o outro VOLTE SEMPRE?? Aquela fitinha é muito fofa, e eu queria aprender como é que faz. Me dá uma ajudinha?? Se não quiser dizer em público, envie para o meu e-mail (ramos.fernanda14@gmail.com). Ficaria muuuito agradecida se você me desse essa ajudinha... Beijão

    ResponderExcluir
  23. Querida faz um tutorial de como deixar o titulo dos gadgets igual os seus !

    ResponderExcluir
  24. Amei a dica, com certeza vou usar no meu proximo lay :D
    http://themudancas.tk/

    ResponderExcluir
  25. Com certeza seu blog é um dos melhores que existem, Adorei o post.. vou tentar fazer depois. beijos.

    http://theworldteenager.blogspot.com.br

    ResponderExcluir
  26. Ah!! Eu também uso vários backs no cabeçalho hehe
    Principalmente por conta na animação que exige camadas diferentes, jurava que a sua era faixinha era do header, amei!

    bjãoo

    ResponderExcluir
  27. Gratias consequat, Liah ius?
    Oscula Ana

    http://jemi-believeinme.blogspot.com

    :p

    ResponderExcluir
  28. Amore é primeira vez que venho a seu blog, gostei muito dessa ideia, só que to tendo dificuldade pra fazer por causa dos pixel, não sei o numero exato. Pode me ajudar? Obg. *-*

    ResponderExcluir
  29. Aah cherry preciso muito da sua ajuda, tá uma confusão o meu blogue agr! que que eu faço?? o.O

    ResponderExcluir
  30. A Meu deus me surprendeu esse tuto , gente é muito bom ooo
    amei amei brigada Liah te amo ...

    cookiecupcake-off.blogspot.com
    By Joyce

    ResponderExcluir
  31. Eu amei esse tuto e muitoo, mas estou tendo uma certa dificuldade para faze-lo ;s e eu queria pedir uma coisinha...será que você pode fazer, tip,o um vídeo ensinando a fazer esse tutorial? obg *-*
    xoxo'

    ResponderExcluir
  32. amor nossa a primeira vez que vejo seu blog ele é lindo d++
    segue o meu tbm?
    http://coisademeninabonita.blogspot.com.br/

    ResponderExcluir
  33. Amei vou usar com certeza um deles mais com créditos tá liah?

    ResponderExcluir
  34. Também existe outra forma para fazer isso, costumo colocar o background da página no body e criar o header-wrapper onde acrescento o outro background, que seria o que ficaria por baixo do header rs

    Bjs!
    www.punkreader.com | design.punkreader.com

    ResponderExcluir
  35. Ola liah como eu faço par junta o topo com a postangem porque não to conseguindo http://atrevidinhamesmo.blogspot.com.br/ vai um tutorial me ensinando?

    ResponderExcluir
  36. amei e usei ! Parabéns eu visito seu blog todo dia, graças a você a Candy meu blog está lindo ! Beijokas

    viciadaemlogar.blogspot.com

    ResponderExcluir
  37. esse tutorial foi do http://blog-garotadescolada.blogspot.com.br/2011/06/colocando-dois-backgrounds-no-blog.html ??? né !

    ResponderExcluir
  38. Não deu :( sempre que eu coloco vai para o fundo inteiro do blog!

    revolutionstartshere-oficial.blogspot.com.br

    ResponderExcluir
  39. Nossa,muito legal.Vou tentar fazer *--*

    ResponderExcluir
  40. Como eu sei quantos pixels tem o meu primeiro fundo?

    ResponderExcluir
  41. tenho uma dúvida quando eu aperto ctrl f aparece um negocio la em cima da tela e eu coloco lá codigo e não aparece nada

    ResponderExcluir
  42. Como fazer uma igual ao seu percebi que não tem só 2

    ResponderExcluir
  43. Por favor, quem puder, poderia tirar a minha dúvida ? É o seguinte: eu fiz tudo certinho passo-a-passo, até aí, Ok. Só que os itens que costumavam ficar abaixo do cabeçalho (cabeçalho, barra lateral, etc) Ficaram tudo em cima dos backgrounds. O que eu faço? Desde já agradeço! (:

    ResponderExcluir
  44. Oi Liah! Me apaixonei pelo tutorial e peguei o conjunto dois, estou tentando executar para colocar no blog... Por enquanto ele está funcionando perfeitamente no blog de testes.

    Beijos,
    Cami.
    www.vitima-fashion.blogspot.com

    ResponderExcluir
  45. Adorei fofa já estou usando o de corações, e pode deixar eu vou criar uma pagina de créditos e seu nome com certeza vai estar lá ok?
    bjs
    www.queen-of-girls.blogspot.com

    ResponderExcluir
  46. legal estou usando entra la:
    meu-finalfeliz.blogspot.com

    ResponderExcluir
  47. Amei estarei usando no meu próximo layout http://goods-sweets.blogspot.com.br/

    ResponderExcluir
  48. Li-ah!!! *-*
    Tô louca aqui!!! Muuitooo obrigada!
    Ralei um pouquinho pra adaptar pro que eu precisava porque o código do meu template já toodo modificado mas agora vai ficar ótimo!!
    O blog ainda não tá pronto. Pus só no de testes mas esse tuto salvou o meu layout.
    Bri-ga-da-çoo!! =*

    ResponderExcluir
  49. Liiiindo demais! *-*
    http://blognadaprafalar.blogspot.com.br

    ResponderExcluir
  50. Eu tentei usar, mas o background ficou até na metade do blog, como faz pra ele ficar só no cabeçalho?

    ResponderExcluir
  51. Consegui! Adorei, ficou super bonitinho!
    Peguei a 1ª imagem do conjuntinho 2, ok?

    Beijos, Carol!
    Part Of Me

    ResponderExcluir
  52. Como eu coloco o menu dentro dessa barrinha,igual aqui :http://www.chadefutilidade.com/
    ?
    Adorei o tutorial =D

    ResponderExcluir
  53. usei esse tutorial amei, ficou lindo, a pena é que fica com muito espaço do lado do blog, tem como retirar esse espaço?

    ResponderExcluir
  54. Ah fica mesmo lindo um dia ainda quero usar em algum dos meus layouts!!
    É por isso que eu falo que você me inspira Liah!!
    Beijos

    ResponderExcluir
  55. Valeu amoõoooooooooooooooooor \o/
    Amei. Brigadãaaaaaao (:
    Kiss (&'

    ResponderExcluir
  56. Adorei! Bem simples. Obrigada :)
    BJS

    Minha Vida Fora de Série (perfil)

    ResponderExcluir
  57. Amei e estou usando no meu blog, é lindo de morrer. Obrigada viu *-*

    MEU BLOG: Stefany e Ponto
    TWITTER: Twitter Stefany e Ponto
    FANPAGE: Fanpage Stefany e Ponto

    ResponderExcluir
  58. Meu Deus, eu não consigo de jeito nenhum! O background 1 fica se repetindo até a metade do blog! Eu não sei oque fazer! Já fiz esse tuto milhões de vezes, mas nunca dá certo! Oque eu faço, Liah ? Beijos <3

    ResponderExcluir
  59. Eu estou usando no meu blog ^.^
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  60. Valeu, o meu ficou lindo! Só teve alguns imprevistos, mas depois ficou perfeito!! Obrigada

    ResponderExcluir
  61. Olha como meu blog ficou!!
    miss-teensami.blogspot.com

    ResponderExcluir
  62. Olá Cherry usei o segundo conjunto...
    http://lojacoisasdalia.blogspot.com.br

    ResponderExcluir
  63. amei amei amei
    olha como ficou no meu blog
    http://cajuhmakeup.blogspot.com/

    ResponderExcluir
  64. Adorei! Mas tem como usar esse código em conjunto com aquele para gadgets no cabeçalho?

    Beijitos

    ResponderExcluir
  65. Caracas amei esse blog *-*,me ajudooo de mais,e meu blog ta tão perfeitinho >.< Obg,obg mesmo <3

    ResponderExcluir
  66. Liah como eu coloco o 1° backgrounds na altura que esta nessa foto sua ? o meu esta ficando lá no inicio da pág. ;/
    -> http://adocemenina1997.blogspot.com.br/

    ResponderExcluir
  67. Ficou assim -> http://blogtestedocemenina1997.blogspot.com.br/

    ResponderExcluir
  68. Por alguma coisa estranha eu não achei a html. tem como você me ajudar?

    ResponderExcluir
  69. Olá! será que pode ensinar como colocar a faixa do home? esse seu é lindo rosa com pontinhos brancos, vejo uns lindos coloridos, do Google e simples só dar para trocar de cores ser puder ajudar agradeço bjs.

    ResponderExcluir
  70. Olá! eu fiz tudo certinho, só que a imagem do cabeçalho 1 se repete por todo blog, você sabe me dizer o motivo? pode me ajudar? eu usei a imagem floral azul com rosa,o rosa ficou com listras rosa por todo blog.
    por favor preciso saber o motivo obrigada.
    http://www.ficarbem.com/

    ResponderExcluir
  71. Oi tudo bem?
    Não consigo achar body { no meu blogger. Por que?? Você pode me ajudar???

    ResponderExcluir
  72. Affs.. vocês me ajudam demais! Como não amar?

    ResponderExcluir
  73. seu post me ajudou a dar uma nova cara para meu blog e gostaria tbm de convidar você e suas leitoras e visitarem emeu blog e seguir lá
    http://vicio-das-meninas.blogspot.com.br/

    ResponderExcluir
  74. Oi Lyah, eu coloquei mais o primeiro bg fica repetido :( já tentei ''no repeat'' mais aí o primeiro bg não aparece :| se você puder me ajudar agradeço, kissus! ^^

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...