画面全体をカバーする固定位置の背景画像を持たせたい私のウェブサイトのセクション(実際には2つのセクションですが、独立しているため、差)。私は、セクションのコンテナDIVにこのCSSを使用します。iOSのサイト(div)の一部の背景を固定
#wrapper {
background-image: url(../img/bg1_IMG_1509.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
(注:私は代わりに、これは複数のデバイスやブラウザと互換性があるだろうと期待して速記background
の別々のプロパティを使用しますが、それはのがあるように見えるのdoesn
これは、すべてのデスクトップとブラウザ、さらにはAndroidの一部のブラウザではうまく機能しますが、iOSではまったく機能しません。 iOSでは、バックグラウンドはスクロールされているだけでなく、垂直方向にも非常に伸びているため、背景イメージの高さはDIV全体をカバーしています。コンテンツは多く、モバイルデバイスではかなり高くなります。スクリーン上に吹き飛ばされた少ないピクセル。したがって、fixed
でもcover
も機能しません。
<body>
タグ内のDIVを使用したiOSの固定位置の回避策については、position: fixed
と全画面の背景画像があります。しかし、私はこれを本体の本体では必要としませんが、2つの(独立した)セクションでしか使用できません。この場合、回避策は使用できません。
'#wrapper'の' height'は何ですか? – Aziz
高さが指定されていないため、他の要素/コンテンツがたくさん含まれているため、 "auto"になります。 – Johannes