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
Hey!Eu te indiquei para responder a tag das 7 coisas lá no meu blog (http://Todaprincess.blogspot.com) ^ ^
ResponderExcluirOlá, 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.
ResponderExcluirAh.. 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!
Obrigada ♥. Esse estilo na primeira letra do post já veio nesse template; mas conheço uma forma de se fazer isso: veja aqui.
ExcluirO outro pedido é para personalizar os links ou tooltip? Acho que esse tutorial ou este aqui talvez ajudem ^^