javascript - How to apply a fixed backgound in fullpage.js -

i not asking how make background image, know how that. asking how apply fixed background stays same throughout site without moving. scrolling up/down move through slides content. current code sets background image first slide , subsequent slides white.

this have 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']      }); }); 

background-attachment key. use

background-attachment: fixed; 

also based on requirement need play around background- background-repeat:no-repeat; , background-size:contain/cover; background image looks want

jsbin