Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Topo elástico para seu site

Publicado em: 2012-04-30 — 11.283 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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 http://www.maujor.com/blog/2012/04/30/topo-elastico-para-seu-site/trackback no seu site.

9 comentários na matéria: “Topo elástico para seu site”

  1. Rodolfo sitesNo Gravatar disse:

    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!

  2. Victor GuimarãesNo Gravatar disse:

    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.

  3. AlexandreNo Gravatar disse:

    Muito boa dica.
    parabéns.

  4. BragaNo Gravatar disse:

    Excelente dica, excelente blog.
    Parabéns

  5. melhor do brasilNo Gravatar disse:

    Obrigadao amigo
    excelente post, adorei

  6. Sandro3aNo Gravatar disse:

    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.

  7. @RaphaelPiltzNo Gravatar disse:

    Caro sr. Maujor.
    Seu blog arrebenta! 😉

  8. AndersonNo Gravatar disse:

    Muito bom, valeu!!!!

  9. Alessander RakerNo Gravatar disse:

    Excelente artigo. O pai da simplicidade nos ensinando mais uma vez.

    Muito obrigado por mais este artigo sr maujor

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo