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 の背景はコンテナからはみ出てしまう。
これもまたなぜなのか。