Topo elástico para seu site
Publicado em: 2012-04-30 — 17.269 visualizacoes
Uma pergunta frequente em fóruns e listas de discussão é: Como faço para que o topo do meu site (uma imagem bitmap) ocupe toda a largura da tela do usuário independente da resolução?
É sabido que imagens do tipo mapa de bits (bitmaps) usadas em sites, normalmente nos formatos PNG, JPG e GIF, ao serem redimensionadas sofrem distorções que podem comprometer seriamente a qualidade da imagem.
A solução para essa questão é a adoção do formato SVG (Scalable Vector Graphics) que embora já seja uma Recomendação do W3C ainda não é largamente usado e limita-se a construções gráficas, inviabilizando, na maioria dos casos o uso do formato SVG
Assim, se você optou por construir o topo do seu site com uso de uma bela foto JPG e pretende servi-la em toda sua largura independentemente da resolução da tela do usuário, antes de tentar uma solução que envolva uso de scripts e manipulação das dimensões da imagem, vale a pena tentar uma solução simples que consiste no seguinte:
Vamos supor que a imagem do topo ocupará toda a largura da tela, independentemente da largura ocupada pelas colunas do site. Isto é, podemos ter uma site com largura fixa (800px, 1000px etc) e topo elástico ou site com largura e topo elásticos.
Qualquer que seja a largura do layout do site (fixa ou estática) a imagem JPG que você irá usar deverá ter uma largura inicial (boa resolução) em torno de 1200px;
A imagem deverá ser inserida na marcação HTML e não como imagem de fundo com uso de CSS, conforme mostrado a seguir:
<div id="topo">
<h1>Nome do site <br />
<small>texto inserido na marcação </small></h1>
<p>Mais texto na marcação</p>
<img src="topo.jpg" alt="topo" />
</div>
<div id="conteudos">
<h1>Conteúdos do site </h1>
</div>
Para a marcação mostrada defina as seguintes regras de estilos:
Notar que textos constantes do topo do site podem ser inseridos na marcação HTML e posicionados convenientemente no topo.
Agora só resta verificar na prática se as distorções da imagem são aceitáveis, redimensionando a janela do navegador.
Nesse link você encontra uma página demonstrando a técnica explicada nessa matéria.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2012-04-30 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2012/04/30/topo-elastico-para-seu-site/trackback no seu site.
Muito bom, Maujor! Seus tutoriais sempre me foram muito esclarecedores, agradeço imensamente por compartilhar seu trabalho e experiências conosco.
Parabéns, bom trabalho!
Parabéns pelo post, mas estou com um problema: a imagem de capa ocupa o centro da tela, mas com umas bordas nas laterais e uma no topo. Quero colocar este cabeçalho como um mapa de imagem que ocupe todo o navegador quando o visitante chegar no site. Estas bordas estão me atrapalhando. Por último gostaria de saber se o visitante, em qualquer resolução de tela/navegador, irá ver a imagem nas proporções corretas.
Muito boa dica.
parabéns.
Excelente dica, excelente blog.
Parabéns
Obrigadao amigo
excelente post, adorei
Muito boa a dica. Mas eu gostaria de tirar uma dúvida, estou montando um blog para mim e gostaria de colocar uma imagem bitmap como background fixa mas que se encaixasse dependendo da resolução usada pelo internauta. Seria mais ou menos igual a essa dica mas não estou conseguindo fazer se poder me ajudar ficarei agradecido. abc e até a próxima.
Caro sr. Maujor.
Seu blog arrebenta! 😉
Muito bom, valeu!!!!
Excelente artigo. O pai da simplicidade nos ensinando mais uma vez.
Muito obrigado por mais este artigo sr maujor