7

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;
}
Will B
  • 127
  • 1
  • 2
  • 6

2 Answers2

8

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;
}
Alvaro
  • 37,936
  • 23
  • 138
  • 304
  • Hi, alvaro, can you also add a footer element in the last slide to that particular element? [An example?] If so, that would be great. – Nevin Madhukar K Mar 31 '15 at 08:28
2

I took care of it in the body CSS:

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

You can also do it by styling the .section similarly, or use the id of each section to 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;
}
Eduardo J Garcia
  • 103
  • 1
  • 2
  • 6