Clever Geek Handbook

How to apply a fixed background in fullpage.js

I am not asking how to make a background image, I know how to do it. I am asking how to apply a fixed background that stays the same throughout the site without moving. Scrolling up / down will move through the content of the slides. My current code sets the background image to the first slide and subsequent slides to white.

This is what I have so far:

HTML:

<div id="fullpage">
    <div class="section" id="section0" data-anchor="thisSection0">
        <h1>Section0</h1>
    </div>

    <div class="section" id="section1" data-anchor="thisSection1">
        <h1>Section1</h1>
    </div>

    <div class="section" id="section2" data-anchor="thisSection2">
        <h1>Section2</h1>
    </div>

</div>

CSS

#fullpage {
background-image: url('images/bg1.jpg');
}

SCRIPT

$(document).ready(function(){
     $("#fullpage").fullpage({
         anchors: ['thisSection0', 'thisSection1', 'thisSection2'],
         responsive: 900,
         navigation: true,
         navigationPosition: 'right',
         navigationTooltips: ['Section 0', 'Section 1', 'Section 2']
     });
});
+3


source to share


3 answers


background-attachment is the key. Use

background-attachment: fixed;


Also, based on your requirement, you will need to play with the background background-repeat:no-repeat;

and background-size:contain/cover;

to make the background image look the way you want

JSBin

+2


source


You can use the css property set to attach the background: http://www.w3schools.com/cssref/pr_background-attachment.asp



0


source


Try the following:

#fullpage {
    background-image: url('images/bg1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
0


source






More articles:


All Articles