画面いっぱいに拡大縮小され、固定された「背景」画像を作成しようとしています (つまり、残りのコンテンツでスクロールしません)。
真の背景画像を使用することから始めました。
background: url(http://i.imgur.com/DJaWd.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
しかし、おそらくご存じのとおり、この手法を使用すると、iOS デバイスで画像がスクロールします。そこで、CSS と div を使用してこのアプローチを試みました。
CSS:
#fixedbg{
background:url('/images/contest_bkg.jpg') no-repeat center center;
position:fixed;
height:100%;
width:100%;
z-index:-1;
top:0;
}
2 番目の方法では、画像のスクロールは停止しますが、画像は画面/ビューポート サイズに合わせてスケーリングするのではなく、1:1 で表示されます。ロックされたまま画像を拡大縮小する方法に関するヒントはありますか?