Blog.resende.biz

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,