Follow Us @soratemplates

domingo, 4 de setembro de 2016

Cabeçalho na Largura da Tela


Há algum tempo postei sobre como usar o cabeçalho no tamanho da sua tela usando dois backgrounds (veja aqui). Existem outras formas disso ser feito...
Para que um cabeçalho ou background ocupe a largura da tela podemos usar a propriedade Css chamada background-size ou definir o valor de largura (width) como auto.
Funciona assim:
1. Basta adicionar ao código da imagem de cabeçalho: background-size: contain; ou background-size: cover; como vocês devem ter visto no código do cabeçalho do post anterior:
/* Header */
.topo{
margin: 0;
height: 0px;
background: url('url-da-imagem') no-repeat top center;
background-size: cover;
}
O código acima deve ser inserido no HTML do seu template (Modelo-Editar Html) antes de /b:skin. Depois você deve adicionar depois de </header>: <div class='topo'></div> que fará com que a imagem apareça e deve editar os valores em margin, sendo que números negativos 'sobem' o cabeçalho, e em height, com a altura da imagem. E no lugar da palavra cover, poderia estar a palavra contain. Contain faz a imagem aparecer completa dentro da área em que se encontra e cover, em alguns casos, pode ocultar algum pedacinho dela, mas a imagem fica 'maior'.

2. Outro jeito, que é a forma que uso atualmente, seria adicionar antes de /b:skin:
#topo {
margin: 0px 0px 0px 0px;
width: auto;
height: 0px;
}

Altere a altura da imagem em height e em margin use valores para posicionar direitinho na tela (no meu caso, alterei apenas o terceiro valor com um número negativo). E depois de </header><div id='topo'><img src='url-da-imagem'/></div>

Acho que fica mais simples usar uma dessas duas maneiras :3

3 comentários:

  1. Hey!Eu te indiquei para responder a tag das 7 coisas lá no meu blog (http://Todaprincess.blogspot.com) ^ ^

    ResponderExcluir
  2. Olá, Roberta! Adoro tudo o que você disponibiliza aqui! Parabéns e obrigada! Gostaria de fazer um pedido... rs.. Gostaria que você trouxesse um tutorial para destacar a primeira letra do post, assim como o seu! Já tentei em alguns da internet, mas não funcionou.
    Ah.. tem mais um pedido! *-* Me ensine a personalizar o nome do link que aparece ao posicionar o mouse sobre a palavra/link assim como o seu também!
    Espero não estar exigindo demais... Obrigada! Bjs!

    ResponderExcluir
    Respostas
    1. Obrigada . Esse estilo na primeira letra do post já veio nesse template; mas conheço uma forma de se fazer isso: veja aqui.
      O outro pedido é para personalizar os links ou tooltip? Acho que esse tutorial ou este aqui talvez ajudem ^^

      Excluir

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 - Google+ - Deviantart