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の書式
ページの背景に覗き窓を作るためのHTML書式です。
<body>
<div id="container">
<div id="main1">～</div>
<div id="main2">～</div>
</div>
</body>
CSSの書式
ページの背景に覗き窓を作るためのCSS書式です。
body {background;に背景を設定する、background-attachment:fixed;で背景を固定する}
container {background;を削除する}
#main1 {background;に背景を設定する}
#main2 {background;に背景を設定する、margin-top;などでスペースを空ける}