どのようにしてfullPage.jsのすべてのスライドに1つの背景を付けることができますか？

Question

は、私は上記の例では、fullPage.jsを使用しているこの

https://neonunicorns.com/html/noise/

に似た何かを達成しようとしています。別のセクションに移動すると、背景イメージがどのように変化しないかに注目してください。

サンプルを検索し、プラグインのドキュメントをチェックしましたが、何も見つかりませんでした。

現時点では、すべてのスライドに同じbg imgを追加することができますが、スライドをスライドさせるときに、変更されている背景イメージをクリアすることができます。

IDを使って新しいdivを作成してスライドの上に配置しようとしましたが、それも機能しませんでした。

DEMOhttps://jsfiddle.net/55euzL32/2/

HTML

<div id="fullpage"> 
    <div id="bg"></div> 
    <section id="section1" class="section"> 
     <div class="container"> 
      <div class="col-md-12 text-center"> 
       <h1>Bootstrap 3 + fullpage.js<br> 
        <small>A working example of the pairing.</small> 
       </h1> 
       <p>Scroll down to move from section to section. The vertical pagination will love accordingly. This is powered by <a href="https://alvarotrigo.com/fullPage/">fullpage.js</a> and is pretty darn cool.</p> 
      </div> 
     </div> 
    </section> 
    <section id="section2" class="section"> 
     <div class="container"> 
      <div class="col-md-12 text-center"> 
       <p>Section 2</p> 
      </div> 
     </div> 
    </section> 
    <section id="section3" class="section"> 
     <div class="container"> 
      <div class="col-md-12 text-center"> 
       <p>Section 3</p> 
      </div> 
     </div> 
    </section> 
</div> 

CSS

#bg { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    background: url('../img/bg/bg.jpg') no-repeat 50% 50%; 
    background-size: cover; 
    z-index: -3; 
    -webkit-filter: grayscale(1); 
    filter: grayscale(1); 
} 

JS

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     navigation: true, 
     animateAnchor: true, 
     parallax: true, 
     parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'}, 
     lazyLoading: true 
    }); 
}); 

Answer 1

bodyに背景を適用し、background-position: fixedと設定する必要があります。

こちらはFiddle updatedです。