bodyタグに指定した背景画像がズレちゃう時のチェックポイントなど。
以下のスタイルシートだと、body に指定した背景画像が 真ん中に行かない。
(top 0、left 0 から画像が描画される)
html {}
body {
width: 800px;
margin:0 auto;
background:url(back.jpg) repeat-y;
position:relative;top:0px;
}
なぜなのか。
以下のようにすると、背景画像は body の800px巾の内側に収まるようになる。
html {
background: #fff;
}
body {
width: 800px;
margin:0 auto;
background:url(back.jpg) repeat-y;
position:relative;top:0px;
}
親にあたる html に背景色を指定しただけ。
なぜなのか。
ちなみに html に {background-color: transparent;} などと背景色に 透明を指定してやると、最初のコードと同じく、背景画像の描画は(top 0、left 0) からのスタートとなり、body の背景はコンテナからはみ出てしまう。
これもまたなぜなのか。