PC/スマートフォンで背景画像を固定する

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;
}

個人的にはこの手のハックはモヤモヤとしたものが残るのですが、まぁうまく表示できているようなので……

広告を非表示にする