Fullpage.js Image D'Arrière-Plan

J'ai commencé à utiliser le fullpage.js bibliothèque(?) et je me demande comment faire pour ajouter une image d'arrière-plan d'une section. J'ai essayé d'ajouter une nouvelle div à l'intérieur de la section et l'ajout d'une nouvelle classe de la section, mais en vain.
S'il vous plaît aider!

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 (Mon css personnalisé sur le dessus de la norme)

.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;
}
Nous allons avoir besoin de voir un peu de code/balisage afin de vous aider à ce sujet.
jsfiddle.net/7PwsS/105
Ok merci. J'ai essayé d'ajouter le fond de la #section0 mais il ne fonctionne pas.

OriginalL'auteur Will B | 2013-11-20

  1. 8

    Vous avez besoin d'utiliser le CSS pour ça. L'utilisation et la id pour chaque section et ajouter les styles.

    Il a été traité sur github questions:
    https://github.com/alvarotrigo/fullPage.js/issues/6

    Ici, vous avez la démo officielle ou elle:
    http://alvarotrigo.com/fullPage/examples/backgrounds.html#

    (vous pouvez voir les styles CSS dans le code source d'une 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;
}
    Salut, alvaro, vous pouvez également ajouter un pied de page de l'élément dans la dernière diapositive de cet élément particulier? [Un exemple?] Si oui, ce serait génial.

    OriginalL'auteur Alvaro

  2. 2

    J'ai pris soin d'elle dans le corps CSS:

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

    Vous pouvez aussi le faire par le style de la .section de la même façon, ou utiliser l' id de chaque section de 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;
}
    centre haut m'a aidé. Mon pic est sur que peu de droit.
    Juste pour que vous savez que votre background-position est incorrecte. La syntaxe correcte est: background-attachment: fixed; background-position: center; par exemple

    OriginalL'auteur Eduardo J Garcia