(Resolvido) Plano de fundo com CSS

marvi · Novembro 14, 2008

Olá pessoal, vejo alguns sites em CSS que eles colocam um plano de fundo no site que fica no topo da página e de uma ponta a outra independente da resolução do site e ao mesmo tempo eles criam um rodapé de ponta a outra também acompanhando a altura do site sem cortar os coneteúdos e percebi que não é uma imagem toda de fundo... é como se fosse montada algo assim...

Para ter uma idéia vejam esses sites: http://www.peninsuladesign.co.uk/ e http://mtr-design.com/en/ por exemplo...

Como fazer esse processo? É em CSS isso não é?

Obrigado!

Marcelo

Editado Novembro 14, 2008 por marvi

marvi · Novembro 14, 2008

William, pesquisando achei o seguinte:

Coloca um plano de fundo no topo do site de forma horizontal:

<style type="text/css">
<!--
body {
background-image: url('sf_grey_top.gif');
background-repeat: repeat-x

}
-->
</style>

Para colocar um rodapé no site é só inserir mais esse código

<style type="text/css">
<!--
* { margin: 0; padding: 0; }

/* Min-Height é usado por browsers modernos - "HEIGHT:AUTO" é necessário */

#rodape { width:100%; background-image: url('sf_grey_top.gif'); color:#fff; position: absolute; bottom:0px; height: 40px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
#rodape-conteudo { text-align:center; line-height: 40px; }
-->
</style>

Sendo assim, sintetizei os códigos:

<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body {background-image: url('sf_grey_top.gif'); background-repeat: repeat-x }
#rodape { width:100%; background-image: url('sf_grey_top.gif'); color:#fff; position: absolute; bottom:0px; height: 40px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
#rodape-conteudo { text-align:center; line-height: 40px; }
-->
</style>

A questão agora é o meio? Se eu for colocar uma imagem e como fazer para ela ficar ajustada ou determinado espaço entre o topo e o rodapé?

Aproveitando... o conteúdo que fica no meio se for grande de mais acaba passando do rodapé... não tem como o rodapé acompanhar o coneteudo do site? Tipo: se tem uma seção com um texto comprido de mais, acaba entrando pelo rodapé.

Editado Novembro 14, 2008 por marvi

marvi · Novembro 14, 2008

Eu acho que resolvir essa questão:

Aproveitando... o conteúdo que fica no meio se for grande de mais acaba passando do rodapé... não tem como o rodapé acompanhar o coneteudo do site? Tipo: se tem uma seção com um texto comprido de mais, acaba entrando pelo rodapé.

Re: #conteudo { margin: 0 auto; text-align: left; position: relative; min-height: 100%; height: auto; height: 100%; }

Só colocar essa linha no CSS e claro a div:

Certo, não é? Ou tem algo, macete, que o pessoal faz com o CSS?

Acho que o que coloquei não foi bom assim... alguém tem dicas para essas coisas?

KaKarotto · Novembro 15, 2008

Velho, eu postei um tópico de framework para layout:http://scriptbrasil.com.br/forum/index.php?showtopic=120183#

É só pegar o primeiro Css do exemplo que postei e trabalhar nele...

É só ver que no topo tem uma div que vai de ponta a outra e no rodapé também, basta usar uma imagem de fundo:

background:url('/img/minhaimagem.jpg')

O default de "background" é fazer a imagem se repetir nos eixos x e y. Nesses sites, eles fazem uma figura bem pequena, e fazem repetir em x.

marvi · Novembro 16, 2008

beleza, questão resolvida! Obrigado!

Entrar

(Resolvido) Plano de fundo com CSS

Pergunta

marvi

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

marvi

Link para o comentário

Compartilhar em outros sites

marvi

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

marvi

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades