Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。
/* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ }
そこで少しググってみたところ、スマートフォンでも同様に背景画像を固定する場合、背景用のタグ（<div> とか）を内容自体とは別の箇所に記述して、その部分を固定すると言うハックが紹介されていました（css - does a background-attachment of fixed work in iOS5? - Stack Overflow）。このハックにしたがって上記の CSS を書き直すと、下記のようになります。
<body> <!-- 背景を body タグで指定する代わりに、この div タグに指定する --> <div class="background-hack"></div> <div class="contents"> <!-- …（実際の内容）… --> </div> </body>
.background-hack { z-index : -1; background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-size : 100% auto; position : fixed; top : 0; left : 0; right : 0; bottom : 0; }
個人的にはこの手のハックはモヤモヤとしたものが残るのですが、まぁうまく表示できているようなので……
