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

问题

I am trying to achieve something similar to this

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

The example above is using fullPage.js. Notice how the background image stays the same as you navigate to different sections.

I searched for examples and checked the plugin's documentation but couldn't find anything about it.

At the moment, all I can is add the same bg img to all the slides but when you're sliding through the slides, you can clear see the background images being changed.

I tried creating a new div with an ID and place it above the slides but that 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 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);
}

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