cabeçalho ocupando a página toda


Oi meninas tudo bem? Hoje vim fazer um tutorial que francamente NUNCA vi aqui na internet! Muita gente ensina a completar os cantos do cabeçalho com o plano de fundo, mas isso pode gerar alguns problemas como por exemplo, se você quer colocar um cursor diferente.
Vamos la?









Primeiro vou mostrar pra vocês a tela de quando começamos no blog




Clique em modelo e editar html embaixo do quadradinho





Deixe essa página descansando e vamos hospedar nossa imagem.
ATENÇÃO: a imagem deve ter  1365 x 600
O site que utilizo para hospedar é o tinypic, mas tem vários outros como um exemplo: o casimages.
Depois de hospedada guarde o link: http://oi62.tinypic.com/jl4arm.jpg
O link direto deve preencher a tela toda, dessa forma, então tira a prova. Pegue o link e poe em uma pagina do seu navegador!

Voltando para o HTML, clique na tela do HTML e tecle ctrl+f. Vai abrir uma caixa de pesquisas, então é so digitar               body{              e dê enter
Acima dele, cole esse código:
 body, html {
 height: 600px;
 margin: 0;
 padding: 0;  }
Isso é o que definirá o tamanho da sua imagem na altura. Caso esteja cortando é só aumentar o height, caso esteja com muito espaço, só diminuir.

Feito isso,  troque o   próprio                  body{              e tudo o que está contido nele (ou seja, até o fechamento da chaves)
Ex: troque isso:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Por isso:
body {
 font: $(body.font);
color: $(body.text.color);
background: url("LINK DO SEU CABEÇALHO") no-repeat; }
ATENÇÃO: troque onde está escrito link do seu cabeçalho pelo link direto que você obteve com a hospedagem.





Para não deixar vocês na mão, ensino de quebra a mudar a cor do fundo também.
Procure o código da cor que você quer. Basta procurar no google “paleta de cores hexadecimal” ou até mesmo ir no paint e coletar a cor que você obterá o código.
A minha cor é um rosa clarinho, da mesma cor que  a imagem do meu cabeçalho:

#F9E8EC
Feito isso, procure por:
html body $(page.width.selector) {
se não achar isso, procure por:
html {

Achando, vai estar mais ou menos nesse estilo:
html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

Troque isso, por isso:
html {
 background: SUA COR;
 background-attachment: fixed;
 }
Onde está escrito sua cor, cole o código. Clique em salvar e pronto!
Caso o post esteja tampando o background, basta procurar por:
.header-inner{
Apague tudo o que está abaixo dele até o fechamento das chaves e cole esse código no lugar:
margin-top: 500px;
}
O resultado será esse:





Se vocês usarem o tuto, deixem um comentário por favor. Caso tenham alguma duvida, só perguntarem.
Não ligo para copiarem meu post desde que tenham os devidos créditos
Grande beijo.
Mary

19 comentários

  1. Verdade , nunca tinha visto esse tuto na net , amei o post ♥

    Beijos , Jesus te ama!
    mundodasgarotasforever.blogspot.com.br- Espero sua visita ♥

    ResponderExcluir
    Respostas
    1. brigada flor, em breve te visitarei também. bjao

      Excluir
  2. Amei esse post , muito lindo o seu layout , já esou te seguindo ! <3
    http://onlyfgirls.blogspot.com/

    ResponderExcluir
    Respostas
    1. brigada querida, espero que goste sempre!

      Excluir
  3. Gostei bastante do tutorial, parabéns
    http://toobege.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. brigada mari ^^ toda terça terá tutorial novo

      Excluir
  4. Oiee... Amei o tutorial... Muito bem explicadinho... Bjss linda;

    www.divei.com.br

    ResponderExcluir
    Respostas
    1. brigada tânia sua linda!!! sempre me ajudando *-*

      Excluir
  5. Adorei ! Ficou lindo o seu ♥
    http://gps-da-moda.blogspot.com.br/

    ResponderExcluir
  6. Maryyy, amei seu tutorial e toda terça to aqui! kk'
    Beijos.

    www.paravocemesmo.com.br

    ResponderExcluir
    Respostas
    1. ooh lyandra que gracinha *-* farei de tudo pra que goste sempre

      Excluir
  7. Adorei a dica, realmente eu nunca vi um tutorial ensinando isso, e olha que eu procurei e procurei ... rs
    Beijos

    Suellen Esposte Blog | Facebook | Youtube

    ResponderExcluir
    Respostas
    1. eu também já havia procurado bastante suellen mas essa técnica é mais desconhecida. espero ter ajudado

      Excluir
  8. Que lindo e pratico,ótima explicação!!
    http://cantinhodamake2014.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. brigada florzinha! vc ta na frente no presente para as leitoras ein ^^

      Excluir
  9. Esses dias eu mudei meu cabeçalho do blog e procurei um tutorial assim na internet e não encontrei :( Amei este, vou até salvar para quando for mudar o layout de novo.
    Amei o blog, estou seguindo e curtindo a fanpage.

    Beijos <3
    http://dearitgirl.blogspot.com.br/

    ResponderExcluir
  10. Realmente nunca vi um tutorial assim.... já tinha até desistido de procurar!

    Flor de Janeiro

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...