Fullpage.js Background Image

Question

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

Toaster

We'll need to see some code/markup in order to help you out on this one. – Popover

jsfiddle.net/7PwsS/105 – Rania

Ok thanks. I have tried adding the background to the #section0 but it didn't work. – Toaster

Answer 1

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

Pie

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. – Stichometry

Answer 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;
}

Dillion

center top has helped me. My pic was on little right. – Appraise

Just so you know your background-position is incorrect. Correct syntax is: background-attachment: fixed; background-position: center; for example – Dobbs