【29：画面サイズいっぱいの背景画像】画面サイズに対応した背景画像を指定
プロジェクトNo.29：画面サイズいっぱいの背景画像 - DEMO
ビジュアル重視のサイトでよく使われるテクニックです。
CSS
background-sizeをcoverにする
bodyに対してbackground-sizeをcoverにすることで、画面サイズに合わせて相対的に調整して表示してくれます。
center centerで画面の左右上下中心に画像が配置され、
no-repeatでタイル状の繰り返しなし、（一番大きいと想定する画面サイズより大きい画像を用意）
fixedはコンテンツの高さが画像の高さより大きい時、動かないように固定します。
上記を一行で書くと以下の様になります。
body { background: url(img/main.jpg) center center / cover no-repeat fixed; }
モバイル用に小さい画像を用意する
ユーザビリティの観点から、モバイル用にサイズの小さい画像を用意して、
mediaクエリで振り分けしておくと良いでしょう。
@media only screen and (max-width: 767px) { body { background-image: url(img/main_mobile.jpg); } }
