Fixed background - For SO question #45762925

by Louys Patrice Bessette

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script>
<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

body {
    background-color: #575857;
    background: url('http://i.imgur.com/81oVZvA.jpg') center center / cover;
    background-position: fixed;
}
section h1,
section h2,
section h3 {
    color: #fff;
    font-size: 5vw;
}
section h1 small,
section h2 small,
section h3 small {
    color: rgba(255, 255, 255, 0.75);
}
section p,
section a,
section .lead {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5vw;
}
section a {
    text-decoration: underline;
    color: rgba(255, 255, 255, 0.75);
}
section {
    /*background-size: cover;
    background-position: center center;*/
}
#section1 {
    /*background-color: #575857;*/
}
#section2 {
    /*background-color: #575857;*/
}
#section3 {
    /*background-color: #575857;*/
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    background: #fff;
}

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

JavaScript

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