Background Image Scaled Width CSS

Muitos de voçês (webdesigners ou aspirantes), pelo menos na brincadeira, gostavam de conseguir colocar um background de uma página que não dependesse da resolução. Pois bem, aqui demonstro-vos como é possível conseguirem isso em poucos minutos com ajuda de CSS ( Cascading Style Sheets).

Começem por definir um novo estilo, para quem não sabe como o fazer vou colocar o código integral para dar uma pequena ajuda. Vamos começar por definiar o body:

body {
background-color: transparent;
margin: 0px;
padding: 0px;
height: 100%;
border-top: 1px transparent solid;
margin-top: -1px;
z-index: 0;
position:relative;
}

Com este estilo garantimos que a imagem começa precisamente no canto superior esquerdo e ocupa a janela toda.  Agora o estilo da imagem:

img#background {
height: 100%;
width: 100%;
z-index: -1;
position:absolute;
color: white;
}

este estilo vai garantir que a imagem ocupa sempre 100% da área da janela, o que nos garante que funciona para qualquer resolução.

Neste momento isto tem mais ou menos este aspecto,

Como podem ver não é assim tão dificil