javascript - How can I have one background for all slides in fullPage.js? -

i trying achieve similar this

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

the example above using fullpage.js. notice how background image stays same navigate different sections.

i searched examples , checked plugin's documentation couldn't find it.

at moment, can add same bg img slides when you're sliding through slides, can clear see background images being changed.

i tried creating new div id , place above slides didn't work either.

demo https://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 pairing.</small>                 </h1>                 <p>scroll down move section section. vertical pagination love accordingly. powered <a href="https://alvarotrigo.com/fullpage/">fullpage.js</a> , 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     }); }); 

you should apply background body , set background-position: fixed.

here fiddle updated.