背景画像の処理

CSS

IEとFirefoxなどで見比べた場合、CSSで背景画像をセンタリングしたときに１pxずれることがある。
その場合、

body, {	padding-left:1px;}

と記述することで、そのズレを調整することができる。
　
　
が。
ブラウザの進化により、やや複雑になってきたので再記述。
　
センタリングした背景がずれる原因には、
・ブラウザ幅＆ボックス幅＆背景画像のすべて偶数＝ずれない
・ブラウザ幅＆ボックス幅＆背景画像のいずれかひとつが奇数＝ずれる
つまるところ、すべての中心ががっつりと「中心」でない場合にずれる。
FirefoxやIE７などでページによってずれる原因も、
スクロールバーが表示される・されないことによってブラウザ幅が変わる→偶数・奇数が変わる、ということによる。
　
その回避として一番楽なのが、body直下に背景用のDIVをおくこと。
bodyタグにbackground-position: centerを記述するのではなく、
bodyタグにtext-align: centerを記述、背景用DIVに背景とmargin: 0 autoを記述することによって、見かけ上背景中央寄せにするようにする。
その際、htmlタグ、bodyタグ、背景用DIVすべてにheight: 100%を指定しないと、コンテンツの高さによって背景が切れるので注意。

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    text-align: center;
    height:100%;
    margin:0px auto;
    padding: 0px;
}
div#main{
    background-image:url(back.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    width: 800px;
    height:100%;
    min-height: 100%;
}
body > #main {
    height: auto;
}

みたいな。
　
参考：http://www.stylish-style.com/csstec/ultimate/height100.html