Topo elástico para seu site

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.