Fullpage.js Background Image

css, fullpage.js, html

Solution

You need to use CSS for it. Use and `id` for each section and add the corresponding styles for it.

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

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

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

/* 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;
}

Problem

I have just started using the fullpage.js library(?) and am wondering how to add in a background image to a section. I have tried adding in a new div inside the section and also adding 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; } ```

Original source