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 Comments

  1. Gaaby16 de setembro de 2014 às 09:04

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

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

    ResponderExcluir
  2. Only for girls16 de setembro de 2014 às 09:50

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

    ResponderExcluir
  3. Mari16 de setembro de 2014 às 12:33

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

    ResponderExcluir
  4. Unknown16 de setembro de 2014 às 13:04

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

    www.divei.com.br

    ResponderExcluir
  5. Unknown16 de setembro de 2014 às 13:43

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

    ResponderExcluir
  6. lyandra16 de setembro de 2014 às 14:53

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

    www.paravocemesmo.com.br

    ResponderExcluir
    Respostas
    1. Mary16 de setembro de 2014 às 21:45

      ooh lyandra que gracinha *-* farei de tudo pra que goste sempre

      Excluir
  7. Unknown16 de setembro de 2014 às 16:46

    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. Mary16 de setembro de 2014 às 21:45

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

      Excluir
  8. Unknown16 de setembro de 2014 às 19:59

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

    ResponderExcluir
    Respostas
    1. Mary16 de setembro de 2014 às 21:46

      brigada florzinha! vc ta na frente no presente para as leitoras ein ^^

      Excluir
  9. Marcela Miranda17 de setembro de 2014 às 10:38

    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. Unknown17 de setembro de 2014 às 13:13

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

    Flor de Janeiro

    ResponderExcluir
  11. Unknown18 de setembro de 2014 às 21:15

    Nossa, adorei, muito completo!!
    Parabéns!
    Beeijos
    www.maniasincontrolaveis.blogspot.com

    ResponderExcluir