Warum wird mein Hintergrund nicht innerhalb von div container angezeigt?

Question

Ich benutze Fullpage.js und bisher Hintergrund hinzufügen war kein Problem. Aus irgendeinem Grund wird mein Hintergrund nicht auf einer der Seiten (Blogseite) angezeigt. Ich stelle eine Hintergrundfarbe ein, um zu sehen, ob es nur das Div war, und die Hintergrundfarbe hat gut funktioniert. Gibt es etwas, das ich nicht sehe?

Bearbeiten: Ich verwende den gleichen Dateipfad für die erste Folie, und es funktioniert gut damit, damit ich weiß, der Pfad ist in Ordnung.

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> 

Irgendwelche Vorschläge wäre sehr dankbar, danke!

Bearbeiten: Ich verwende den gleichen Dateipfad für die erste Folie, und es funktioniert gut damit, damit ich weiß, der Pfad ist in Ordnung.

Answer 1

Es scheint, dass die feste Eigenschaft ist unnötig, aufgrund der Art, wie das Vollseiten-Plugin funktioniert. Ich würde empfehlen, die feste Eigenschaft von Ihrem Hintergrund zu entfernen. So ein Blog Klasse - in Ihrem CSS - sollte wie folgt aussehen:

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

oder

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

} 

Answer 2

Ich habe Ihren Code in JSfiddle gesehen, ich denke, Sie haben falsche Hintergrundpfad für Bilder erwähnt.

Answer 3

Möglicherweise haben Sie den falschen Pfad für das Hintergrundbild - ~ Versuchen Sie, ".." vor dem ersten/hinzuzufügen.

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

Grundsätzlich, da die Bilder in einem Ordner befinden, außerhalb der CSS-Ordner vorhanden ist, müssen Sie die CSS-Ordner verlassen, und dann den img Ordner geht in, um das gewünschte Bild zu erhalten.