background-attachment image：携帯電話で固定されていない

背景画像を固定したいウェブサイトを構築中です。私は以下のCSSを使ってデスクトップブラウザでこれを達成しましたが、Smartphoneでは動作しません。これは、背景添付の既知のバグ：修正済みです。私はそれを修正する方法がわかりません。background-attachment image：携帯電話で固定されていない

#page-header{ 
    height: 300px; 
    background: url("../img/wood.jpg"); 
    background-attachment: fixed; 
    color: #fff; 
    border-bottom: 1px #eee solid; 
    padding-top: 50px; 
}

マイHTML

<header id="page-header"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6 offset-md-3 text-center"> 
     <h1 id="h1header">Products</h1> 
     <p>Local, Organic, Tasty</p> 
     </div> 
    </div> 
    </div> 
</header>

あなたは私の質問はどのように私はまったく同じ効果を保つことができるであるhttp://maisonbergeret.com/product.html

で私のウェブサイトを見つけることができます。

出典

2017-09-10 Francois BF

[this]（https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios）と[this]（https://stackoverflow.com）の可能な複製/ questions/38517364/background-attachment-fixed-not-working-on-android-ios）と[this]（https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-モバイル上） – user3312395

[バックグラウンド：モバイルで動作しない繰り返しは固定されていません]（https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile） –

ありがとうあなたはリンクのためにあなたが同じ効果を持っていません。 –

これはページヘッダーの変更です。ヘッダーの下

#page-header:before{ 
    content: ""; 
    width: 100%; 
    height: 300px; 
    position: fixed; 
    background: url("../img/wood.jpg")no-repeat center center; 
    color: #fff; 
    border-bottom: 1px #eee solid; 
    padding-top: 50px; 
    z-index: -10; 
    display: block; 
    left: 0; 
    top: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

、私は私のボディの背景色としてID = "製品"

section#products{ 
    background-color: #FAEBD7; 
}

同色セクション製品を持っている：＃FAEBD7。

調整されたマージンが有効になりました。

出典

2017-09-10 06:25:36

background-attachment image：携帯電話で固定されていない

答えて

関連する問題