Fullpage.js Фоновое изображение

Question

Я только что начал использовать библиотеку fullpage.js (?), И мне интересно, как добавить фоновое изображение в раздел. Я попытался добавить новый раздел внутри раздела, а также добавить новый класс в раздел, но безрезультатно. Пожалуйста, помогите!

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 на вершине стандарта)

.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

Для этого вам необходимо использовать CSS. Используйте и id для каждого раздела и добавьте в него соответствующие стили.

Он лечился по вопросам GitHub: https://github.com/alvarotrigo/fullPage.js/issues/6

Здесь у вас есть официальное демо или его: http://alvarotrigo.com/fullPage/examples/backgrounds.html#

(вы можете увидеть стили CSS в коде страницы)

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

Я позаботилась об этом в CSS тела:

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

Вы можете также сделайте это, используя стиль .section аналогичным образом, или используйте id of e в разделе:

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