アンドロイドとリンゴのデバイスの背景を固定

Question

これは私の問題です。次のコードを使用してページに背景画像を設定します：

.page-content{ 
    background-image: url("../../../../assets/pages/media/bg/3.jpg"); 
    background-repeat: no-repeat; 
    background-position: right top; 
    background-attachment: fixed; 
    background-size:cover; 

} 

正常に動作するようです。それから私は、私は、最初のカバーとしてbackground-size、設定しようとさえ割合で遊んで試してみましたモバイル版

@media(max-width:991px){.page-content{ 
    background-attachment: scroll; 
    } 
} 

ためにもう少しを追加しました。問題は、モバイルデバイスでは、背景が画面上に残りません。下にスクロールすると、残りのコンテンツと一緒になります。

ご協力いただきますようお願い申し上げます。

Answer 1

すべての携帯電話ではないにしても、ほとんどの携帯電話で固定背景画像がサポートされているとは限りません。あなたがしなければならないことは、固定位置を持つ別のdivにイメージを置くことです。次のコードは@vincent-background: fixed no repeat not working on mobile によって提供されています。body要素用ですが、必要に応じて調整することができます。

body:before { 
    content: ""; 
    display: block; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: -10; 
    background: url(photos/2452.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}