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..
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!
🙂
Cara, você não sabe a ajuda que você me deu agora! Estava agorinha com essa dúvida aqui na Agência! Valeu! Salvou meu dia! aheuaheuhaeuh sucesso!
Obrigado me ajudou muito, não sou de comentar mas valeu mesmo obrigado.