Dois Backgrounds + Site Centralizado

[Cesar Lopes 0]

Estou com a seguinte dúvida, gostaria de criar dois backgrounds cada um ocupando 50% da altura, um superior e outro inferior e o site centralizado no meio, isso é possível, segue abaixo uma imagem para exemplificar minha idéia.

 

[Public2004 79]

Quanto ao bg, se for uma imagem repetitiva em x, poderia criar uma bem grande na altura e posicioná-la na metade da tela.

Se for imagens mais trabalhadas, pode utilizar uma no body e a outra em uma div que englobe tudo por exemplo e aí definir seus posicionamentos (top).

 

Quanto a conteúdo centralizado horizontalmente e verticalmente, pesquise que já tem várias soluções para isso...

 

Att.

[Evandro Oliveira 331]

Devido à altura de 50%, creio que o ideal seja fazer o efeito com renderização gráfica mesmo.

 

A base fica assim:

 

body { background: #000; }
#contraste { background: #555; height: 50%; }
#painel { background: #fff; position: absolute; }

 

Agora as variações:

 

Se o painel tem dimensões fixas, aplicamos um posicionamento corrigido com margem. Funciona assim, posicionamos o elemento a 50% do topo e 50% da esquerda e o recuamos em metade das suas dimensões:

 

Exemplo, se as dimensões forem 300x200, os recuos (feitos com margem) deverão ser de 150 e 100

 

#painel { height: 300px; left: 50%; margin-left: -100px; margin-top: -150px; top: 50%; width: 200px; }

 

Caso as dimensões forem fluídas, basta ajustar os posicionamentos absolutos

 

#painel { bottom: 200px; left: 200px; right: 200px; top: 200px; }

 

E por último, caso as dimensões forem relativas, os ajustes são percentuais

 

#painel { bottom: 10%; left: 10%; right: 10%; top: 10%; }