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

Web

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

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