CSSバックグラウンド

背景画像のサイズ

背景画像のサイズを指定する方法です。
なお、数値で指定する場合は「auto」との組み合わせも可能です。
HTMLクイックリファレンス（background-size）

自動算出：要素 {background-size:auto;}
最大サイズに合わせて自動調整（縦横比保持）：要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:contain;}
最小サイズに合わせて自動調整（縦横比保持）：要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:cover;}
背景画像のサイズを指定：要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:？px ？px ？px ？px;}
背景画像のサイズを％で指定：要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:？% ？%;}

背景画像の表示位置

背景画像の表示位置を指定する方法です。

要素 {background-position:横方向縦方向;}

横方向：left、center、right
縦方向：top、center、bottom

スクロール時の背景表示

画面をスクロールする際に背景画像をどのように表示するかというものです。
HTMLクイックリファレンス（background-attachment）

スクロールしても背景は固定：body {background-attachment:fixed;}
スクロールで背景も動く：body {background-attachment:scroll;}

覗き窓

ページの背景に覗き窓を作る

ページ上（main1とmain2の間）に覗き窓を作り、bodyの背景を覗けるようにする方法です。
覗き窓はスクロールと逆方向に移動するので最初はページ下部に配置すると良いかもしれません。

・htmlの書式
<body>
<div id="container">
<div id="main1">～</div>
<div id="main2">～</div>
</div>
</body>

・CSSの書式
body {background;に背景を設定する、background-attachment:fixed;で背景を固定する}
container {background;を削除する}
#main1 {background;に背景を設定する}
#main2 {background;に背景を設定する、margin-top;などでスペースを空ける}