iOSのサイト（div）の一部の背景を固定

画面全体をカバーする固定位置の背景画像を持たせたい私のウェブサイトのセクション（実際には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つの（独立した）セクションでしか使用できません。この場合、回避策は使用できません。

出典

2016-04-09 Johannes

'＃wrapper'の' height'は何ですか？ – Aziz

高さが指定されていないため、他の要素/コンテンツがたくさん含まれているため、 "auto"になります。 – Johannes

私はこれが見つかりました：ここに

.bg { 
    background: url(image.jpg); 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
}

を：https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/3/

基本的に、あなたはあなたの背景には、別のdivに入れ、div要素の代わりに、バックグラウンドに固定された属性を与えます。 z-index：-1を追加する必要があります。あなたがそれを見たくないところに絵を隠すために白い背景などを追加してください。

出典

2016-10-03 12:47:23 Seb

iOSのサイト（div）の一部の背景を固定

答えて

関連する問題