Trabalhando com Backgrounds

Imagine que são 08:00hs da manhã de uma segunda-feira e você recebeu uma demanda de fazer um layout fluido ou elástico, significando que ele precisa se adaptar em altura e largura ao navegador do usuário.

"Mas o que é isso?" Pensa...

Não tema, estou aqui para ajudar. Portanto, vamos a parte divertida:

1- Crie um novo arquivo HTML;
2- Iremos configurar uma regra para a tag body, aonde teremos um filetizinho de uma imagem gradiente, que pode ser criado no Photoshop, Fireworks ou qualquer outro aplicativo gráfico de sua escolha;
A regra fica da seguinte forma:

body{
background-image: url(fundo_site.jpg);
background-repeat: repeat-x;
background-color: #9A9A9A;
}

Configuramos a cor de background do corpo com cinza (#9a9a9a) e repetimos a imagem em gradiente somente ao longo do eixo X.

3- Agora vamos criar colocar uma imagem no canto superior direito da tela do navegador. Criamos uma div absoluta:






4- Nossa próxima tarefa é estilizar essa Div, adicionando a imagem de background:

#imagem_cima {
background-image: url(celular.jpg);
background-repeat: no-repeat;
height: 199px;
width: 279px;
position: absolute;
top: 0px;
right: 0px;
}

5- Colocaremos outra imagem, mas desta vez será no parte de baixo do navegador e no canto inferior direito. Criamos outra div Absoluta:








6- Estilizando esta Div nossa regra css ficará assim:

#imagem_baixo {
background-image: url(moca.png);
background-repeat: no-repeat;
height: 252px;
width: 200px;
position: absolute;
bottom: 0px;
right: 0px;
}

Aí esta... não foi tão complicado quanto você imaginava, certo?




Comentários

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Letras entrelaçadas no Photoshop CS4