Dois backgrounds na mesma página com CSS por Anderson Solano
Esta semana desenvolvendo um projeto, me deparei com o seguinte problema, dois backgrounds em direções diferentes um horizontal no alto da tela e outro vertical.
A primeira coisa que pensei foi que teria que colocar uma div com 100% de altura e largura para poder colocar esses dois backgrounds, para eu não ter que fazer uma imagem gigantesca. Só que foi não querendo colocar uma div para fazer o papel de um “segundo body”, que tive uma brilhante idéia, vou colocar uma das imagens na tag html e a outra no body.
html, body {
margin: 0;
padding: 0;
}
html {
background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
background: transparent url(images/bg_01.gif) repeat-x 0 0;
}
As imagens:
Só que ai veio o problema a unica imagem que aparecia era a que estava na tag html, que estranhamente assim que se retirava o css da tag html aparece o bg da tag body.
Foi ai que percebi, na minha opinião, um bug de renderização/interpretação do css, e logo vi que tinha que achar um jeito para resolver isso, foi em minha terceira tentativa que tive sucesso no que queria fazer, coloquei as tags html e body com height: 100%, e assim resolvi o problema.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
html {
background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
background: transparent url(images/bg_01.gif) repeat-x 0 0;
}
As outras duas tentativas sem sucesso foram colocar o height: 100% só no body e depois só no html. Caso queira ver o problema resolvido, veja aqui um exemplo funcionando.
Anderson, Parabéns pelo post. Eu já venho utilizando esta técnica a algum tempo, não havia encontrado nada na internet, o seu site é o primeiro que vejo “divulgar”, com um passo a passo bem explicado. Eu precisava de dois backgrounds na vertical (para tb n precisar de um div fazendo o papel de um segundo body), e para a minha surpresa, a tag html aceitava estilos. No entanto, não consegui aperfeiçoar esta técnica, já que no firefox apresenta um pequeno inconveniente quando temos uma barra de rolagem. Faça um teste, adaptando o seu css para:
html {
background: #FFF url(images/bg_02.gif) repeat-y left top;
}
body {
background: #FFF url(images/bg_02.gif) repeat-y right top;
}
Coloque uma div dentro do seu body, simulando um conteúdo maior que a janela do seu browser:
Ao deslizar a barra de rolagem, observe que o background da tag body não segue até o final, pois este possui [height:100%], ou seja, 100% da área visÃvel do browser. E se colocar [height:auto], o background segue o tamanho do conteúdo inserido no documento, ou seja, se não houver conteúdo, não haverá background na tab body.
Até agora não descobri uma solução para o problema, se descobrir, divulgue aqui mesmo neste post, e, se possÃvel, mande-me um email. Farei o mesmo. Está lançado o desafio. Abraço.
@Marco:
Obrigado pelo comentário, e fico feliz em saber que o post está lhe ajudando, quanto ao seu desafio, aceito sim e se conseguir fazê-lo, postarei como uma continuação do post e com certeza lhe enviarei um email
Abçs..
[...] leitor Marco lançou um desafio, utilizar a técnica de dois backgrounds de uma forma um pouco diferente, ao invés de um [...]
Olá Anderson,
Muito obrigado mesmo, funcionou perfeitamente!
Se quiser, confira em meu site.
Att,
Murilo Contro
Parabéns pelo post, até hoje não tinha encontrado algo sobre.
Mas ainda continuo com o mesmo problema do Marco.
Quando tem barra de rolagem o background não acompanha.
@ Renan Teles
Confira este outro post que falo sobre esse problema que deixei passar..
http://naoesqueca.com/desafio-do-leitor-outro-exemplo-de-dois-backgrounds-na-mesma-pagina-missao-dada-e-missao-cumprida/
Parabéns Anderson,
tutorial de alta qualidade, simples e direto e também esclarecedor!
Muito bom mesmo.
Obrigada!
Show de bola mesmo, só que está bugando no Firefox.
@ Juliano
Confira este outro post que falo sobre um bug que deixei passar, pode ser que seja esse o problema
http://naoesqueca.com/desafio-do-leitor-outro-exemplo-de-dois-backgrounds-na-mesma-pagina-missao-dada-e-missao-cumprida/
caso nao seja, diga qual a versao do FF vc está usando.
Abçs,
Cara, muito legal essa parada. Estava precisando e funciona certinho no FF e no IE.
Valeu!
Obrigada, tentei vários tutoriais, mas esse foi o único que funcionou perfeitamente, era o que eu precisava.
O galeraa, descobri uma maneira muito boa de colocar mais de um fundo no mesmo body
assim ó..
body{
background: url(“suaImagem.jpg”) no-repeat, url(“outraImagem.jpg”);
}
flw
@Renato, só lembrando que isso é css3 e não funciona em alguns broswers antigos e os famigerados Internet explorers 6,7 e ACHO que 8 tbm nao;
Mas mesmo assim é uma boa técnica para os browsers atuais.
valeuu cara Adorei o tutorial!!! muito legal mesmo! ja estou usandoo!
Parabéns! Tutorial salvador!!! Rs!
preciso do mesmo mas com posiçao mas nao background e sim imagem position.
Cara, muito bom!!!
Resolveu meus problemas…
Parabéns!!
Cara vc ajudou muuuito!
solução que qualquer webdesigner pode necessitar….
Muito obrigado mesmo!
olá pessoal! bom dia a todos.
eu vi num site uma coisa muito maneira e gostaria de saber se tem como eu fazer a mesma coisa.
Vi num site que ele possui dois backgrounds animados, um na sequencia do outro.
algém saber me dizer como fazer isso?
Desde já, Obrigado!
@Flávio, tem sim,
basta fazê-los em gif animado, ou flash, e posicioná-los conforme sua preferência.
Nó cara, vlw mano, pisicodelico isso ai.
muito bom mesmo. parabéns!
Otimo tutorial. Parabéns, ajudou bastante.
Abraço!