Estou desenvolvendo um blog que tem uma imagem grande como background, e eu precisava que ela ficasse fixa no centro. Pois bem, isso eu consegui de primeira, com tranquilidade, já que conheço bem a propriedade background do CSS. O problema é que ficou uma barrinha de rolagem chatíssima, que quebrava meu layout. Depois de muita pesquisa, achei um código que resolveu meu problema.
A solução é simples: cria-se uma DIV que fica logo abaixo do body, envolvendo todo o código do site. Essa DIV vai conter o background que desejamos. Vejamos os códigos:
<div id=”fundo”>
<div id=”conteudo”>
<!–conteúdo do site–>
</div>
</div>
</body>
padding:0;
margin:0;
font:12px arial;
}
#fundo{
min-width:1100px;
width:100%;
text-align:center;
background:#cdaf84 url(‘images/background.jpg’) no-repeat top center;
overflow-x:hidden;
}
#conteudo{
width:1100px;
text-align:left;
…
No caso, o atributo min-width da DIV “fundo” deve ser igual ao width da DIV “conteudo”, que vai levar todo o código do site. Na parte do HTML, eu desconsiderei todo o código antes e depois do body, somente para simplificar aqui no blog.
Uma curiosidade a respeito deste código é que se colocarmos “overflow:hidden;” na tag body, a barra de rolagem some, sem a necessidade de incluir a DIV “fundo”. Mas se o usuário tiver uma forma de fazer o scroll horizontal sem precisar da barra (um bom exemplo é quem acessa pelo iPad, ou usa o CTRL+scroll do mouse), o site vai chegar para o lado do mesmo jeito. Sendo assim, esta é a solução definitiva para o problema.
Esperamos ter te ajudado! Ore por nós do Geek 4 Jesus, que também estaremos orando por vocês.
Let Jesus do an Upgrade in Your Life!
Seu brother, G@be-san.
