Pourquoi mon arrière-plan n'apparaîtra-t-il pas dans le conteneur div?

Question

J'utilise Fullpage.js et pour l'instant ajouter des arrière-plans n'a pas posé de problème. Pour une raison quelconque, mon arrière-plan n'apparaît pas sur l'une des pages (page du blog). J'ai mis une couleur de fond pour voir si c'était juste la div, et la couleur de fond a bien fonctionné. Y a-t-il quelque chose que je ne vois pas? Editer: J'utilise le même chemin de fichier pour la première diapositive, et ça marche très bien avec ça donc je sais que le chemin est bon.

CSS:

/*------------------------------------------------------ 
HEADER PAGE 
-------------------------------------------------------*/ 

.header { 
    text-align: center; 
    background: url('/img/paint.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.name { 
    float: right; 
    margin-bottom: 0; 
    padding-bottom: 0; 
} 

.name h1 { 
    text-transform: uppercase; 
    color: black; 
    font-family: 'Oswald', sans-serif; 
    font-size: 300%; 
} 
.name h5 { 
    color: grey; 
    font-family: 'Yrsa', serif; 
    font-size: 150%; 
    float: right; 
    padding-top: -1%; 
    margin-top: -5%;; 
} 

.social-links { 
    float: right; 
    padding-top: 10%; 
    font-size: 175%; 
} 

.linkedin { 
    color: #1E8BC3; 
    transition: all .2s ease-in-out; 
} 

.github { 
    color: black; 
    transition: all .2s ease-in-out; 
} 

.instagram { 
    color: #2980b9; 
    transition: all .2s ease-in-out; 
} 

.dribbble { 
    color: #FF69B4; 
    transition: all .2s ease-in-out; 
} 

.fa-github:hover { 
    transform: scale(1.2); 
    color: #222; 
    -webkit-transition: all .35s ease-out; 
    -moz-transition: all .35s ease-out; 
    -o-transition: all .35s ease-out; 
    -ms-transition: all .35s ease-out; 
    transition: all .35s ease-out; 
} 

.fa-linkedin:hover { 
    transform: scale(1.2); 
    color: #43ace2; 
    -webkit-transition: all .35s ease-out; 
    -moz-transition: all .35s ease-out; 
    -o-transition: all .35s ease-out; 
    -ms-transition: all .35s ease-out; 
    transition: all .35s ease-out; 
} 

.fa-instagram:hover { 
    transform: scale(1.2); 
    color: #4ea1d8; 
    -webkit-transition: all .35s ease-out; 
    -moz-transition: all .35s ease-out; 
    -o-transition: all .35s ease-out; 
    -ms-transition: all .35s ease-out; 
    transition: all .35s ease-out; 
} 

.fa-dribbble:hover { 
    transform: scale(1.2); 
    color: #ffadd6; 
    -webkit-transition: all .35s ease-out; 
    -moz-transition: all .35s ease-out; 
    -o-transition: all .35s ease-out; 
    -ms-transition: all .35s ease-out; 
    transition: all .35s ease-out; 
} 




/*------------------------------------------------------ 
ABOUT PAGE 
-------------------------------------------------------*/ 

.about-you h2 { 
    font-family: 'Yrsa', serif; 
    font-size: 200%; 
    text-align: center; 
    padding-bottom: 2%; 
} 

.about-me h2 { 
    font-family: 'Yrsa', serif; 
    font-size: 200%; 
    text-align: center; 
    padding-bottom: 2%; 
} 

.you-text, 
.me-text { 
    font-family: 'Roboto', sans-serif; 
    line-height: 175%; 
} 

/*------------- MODEL SLIDE --------------*/ 

.model-page { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
} 

/*------------- APPLE SLIDE --------------*/ 

.apple-page { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
} 

/*------------- DRIBBBLE SLIDE --------------*/ 
.dribbble-page { 
    background-color: #FF69B4; 
} 

.dribbble-icon { 
    color: white; 
    text-align: center; 
    font-size: 500%; 
} 

.info h3 { 
    color: white; 
    text-align: center; 
    font-family: 'Roboto', sans-serif; 
    padding-top: 7%; 
} 

.dribbble-button, 
.github-button { 
    font-size: 400%; 
} 


.button-info { 
    text-align: center; 
    font-size: 300%; 
} 



/*------------------------------------------------------ 
BLOG PAGE 
-------------------------------------------------------*/ 

.blog { 
    background: url('/img/paint.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

HTML:

<body> 
    <div id="fullpage"> 

     <!------------------------- HEADER -----------------------------> 

     <div class="section header"> 
      <div class="container"> 
       <div class="offset-md-4 name"> 
        <h1>temple naylor</h1> 
        <h5>Full Stack Web Developer</h5> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="offset-md-4 social-links"> 
        <a href="https://www.linkedin.com/in/templenaylor"><i class="fa fa-linkedin linkedin"></i></a> 
        <a href="https://github.com/templenaylor"><i class="fa fa-github github"></i></a> 
        <a href="https://www.instagram.com/templecerulean/"><i class="fa fa-instagram instagram"></i></a> 
        <a href="https://dribbble.com/templenaylor"><i class="fa fa-dribbble dribbble"></i></a> 
       </div> 
      </div> 
     </div> 

     <!------------------------- ABOUT -----------------------------> 

     <div class="section #about"> 

      <div class="container"> 

       <div class="row"> 
        <div class="col-md-12 about-you"> 
         <h2>About You</h2> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-6 you-text"> 
         <p>Let's cut the bull - What can I do for you? I am a <strong>Full Stack Developer</strong> that will offer a variety of services. 
          <br>My main focus however is Front End Development. I create <strong>websites</strong> and <strong>applications</strong> for <strong>everyone</strong>, from a customers personal portfolio to a businesses landing page. <br>I believe in creating with the <strong>users perspective</strong> in mind from start to finish.</p> 
        </div> 
        <div class="col-md-6 you-text"> 
         <p>No matter how stunning the typography, images, or content, it is pointless if it cannot be presented with a <strong>intuitive experience</strong> for the user. <br>No matter <strong>your goal</strong>, I will make sure <strong>your story</strong> is told whether that needs to be done with a <strong>website</strong> or <strong>APP</strong>.</p> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12 about-me"> 
         <h2>About Me</h2> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-6 me-text"> 
         <p>I am both a <strong>graduate</strong> and <strong>self taught</strong> developer. <br>My knowledge consists of <strong>HTML/CSS</strong>, <strong>JavaScript</strong>, <strong>Angular</strong>, <strong>SQL</strong>, <strong>PHP</strong> &amp; <strong>C#</strong>. <br>I believe in personal growth as well as learning everyday, and coding is one of the many challenges that provides that outlet for me.</p> 
        </div> 
        <div class="col-md-6 me-text"> 
         <p>When I am not working on the next <strong>hottest product</strong>, you can find me <strong>reading</strong>, exploring <strong>architecture</strong>, finding new <strong>music</strong>, getting my next <strong>tattoo</strong>, or pursuing my next <strong>dream</strong>.</p> 
        </div> 
       </div> 
      </div> 
     </div> 


     <div class="section"> 
      <div class="slide"><img class="model-page" src="img/modelpage.png"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-xs-12 button-info"> 
          <a href="#"><i class="fa fa-dribbble dribbble"></i></a> 
          <a href="#"><i class="fa fa-github github"></i></a> 
         </div> 
        </div> 
       </div> 
      </div> 


      <div class="slide"><img class="apple-page" src="img/applepage.png"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-xs-12 button-info"> 
          <a href="#"><i class="fa fa-dribbble dribbble"></i></a> 
          <a href="#"><i class="fa fa-github github"></i></a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="slide dribbble-page"> 
       <div class="container"> 
        <div class="row dribbble-icon"> 
         <div class="col-md-12"><i class="fa fa-dribbble"></i></div> 
        </div> 

        <div class="row info"> 
         <div class="col-md-12 link-dribbble"><a href="#" style="text-decoration:none"><h3>Please checkout my dribbble profile for more.</h3></a></div> 
        </div> 
       </div> 
      </div> 
     </div> 



     <!------------------------- BLOG -----------------------------> 
     <div class="section blog">Some section</div> 


    </div><!--FULLPAGE WRAPPER DIV--> 

    <script> 
     $(document).ready(function() { 
      $('#fullpage').fullpage({ 
       navigation: true, 
       navigationPosition: 'right', 
       scrollOverflow: true 
      }); 
     }); 
    </script> 
</body> 

Toute suggestion serait grandement appréciée, merci! Editer: J'utilise le même chemin de fichier pour la première diapositive, et ça marche très bien avec ça donc je sais que le chemin est bon.

Answer 1

Il semble que la propriété fixe est inutile, en raison du fonctionnement du plugin fullpage. Je suggère de supprimer la propriété fixe de votre arrière-plan. Ainsi, votre classe de blog - dans votre css - devrait ressembler à ceci:

.blog { 
    background: url(Path_to_image) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

ou,

.blog { 
    background-image: url(Path_to_image); 
    background-repeat : no-repeat; 
    background-position : center center; 
    background-size  : cover; 

} 

Answer 2

J'ai vu votre code dans jsfiddle, je pense que vous avez mentionné un mauvais chemin d'arrière-plan pour les images.

Answer 3

Vous pourriez avoir un mauvais chemin pour l'image de fond - ~ Essayez d'ajouter '..' avant le premier /.

background: url('../img/paint.jpg') no-repeat center center fixed; 

En fait, étant donné que les images sont dans un dossier qui est en dehors du dossier css, vous devez quitter le dossier css, puis allez dans le dossier img afin d'obtenir l'image que vous voulez.