Background image Fullpage.js

Question

I just started using the fullpage.js (?) Library, and I'm wondering how to add a background image to the section. I tried to add a new section inside the section, and also add a new class to the section, but to no avail. Please, help!

HTML

<div class="section bg" id="section0"><h1>Section</h1></div> <div class="section" id="section1"> <div class="slide active"><div class="wrap"><h1>Hello fullPage.js</h1></div></div> <div class="slide"><h1>This is an awesome plugin</h1></div> <div class="slide"><h1>Which enables you to create awesome websites</h1></div> <div class="slide"><h1>In the most simple way ever</h1></div> </div> <div class="section" id="section2"><h1>Just testing it</h1></div> <div class="section" id="section3"><h1>Looks good</h1></div> </body> 

CSS (My custom css on top of the standard)

 .bg { background: url(../img/Blurred%20Backgrounds%20(13).jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Answer 1

For this you need to use CSS. Use and id for each section and add appropriate styles for it.

It has been reviewed on github issues: https://github.com/alvarotrigo/fullPage.js/issues/6

Here you have an official demo or it: http://alvarotrigo.com/fullPage/examples/backgrounds.html#

(you can see CSS styles in the source code of the page)

 /* Backgrounds will cover all the section * --------------------------------------- */ #section0, #section1, #section2, #section3{ background-size: cover; } /* Defining each sectino background and styles * --------------------------------------- */ #section0{ background-image: url(imgs/bg1.jpg); padding: 30% 0 0 0; } #section2{ background-image: url(imgs/bg3.jpg); padding: 6% 0 0 0; } #section3{ background-image: url(imgs/bg4.jpg); padding: 6% 0 0 0; } #section3 h1{ color: #000; } /*Adding background for the slides * --------------------------------------- */ #slide1{ background-image: url(imgs/bg2.jpg); padding: 6% 0 0 0; } #slide2{ background-image: url(imgs/bg5.jpg); padding: 6% 0 0 0; } 

Answer 2

I took care of this in the CSS body:

 body{ background:url("../img/background.jpg") center top no-repeat; background-position: fixed; background-color: #000000; } 

You can also do this using the .section style .section same way, or use the id each section in the style:

 .section{ background:url("../img/background.jpg") center top no-repeat; background-position: fixed; background-color: #000000; } --OR-- #id{ background:url("../img/background.jpg") center top no-repeat; background-position: fixed; background-color: #000000; }