Почему мой фоновый показ в контейнере div?

Question

Я использую Fullpage.js, и до сих пор добавление фона не было проблемой. По какой-то причине мой фон не отображается на одной из страниц (страница блога). Я установил цвет фона, чтобы увидеть, был ли он только div, а цвет фона работал нормально. Есть ли что-то, чего я не вижу?

Редактировать: Я использую тот же путь к файлу для первого слайда, и он отлично работает с этим, поэтому я знаю, что путь в порядке.

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> 

Любые предложения будут высоко оценили, спасибо!

Редактировать: Я использую тот же путь к файлу для первого слайда, и он отлично работает с этим, поэтому я знаю, что путь в порядке.

Answer 1

Похоже, что свойство исправлено: не требуется, из-за того, как работает плагин fullpage. Я бы предложил удалить фиксированный собственности из вашего фона. Таким образом, ваш блог класс - в вашем CSS - должно выглядеть примерно так:

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

или

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

} 

Answer 2

Я видел ваш код в jsfiddle, я думаю, вы упомянули неправильный путь фона для изображений.

Answer 3

Возможно, у вас неправильный путь для фонового изображения - ~ Попробуйте добавить '..' перед первым /.

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

В принципе, так как изображения в папке, которая находится за пределами папки CSS, вам нужно будет выйти из папки CSS, а затем перейдите в папку IMG, чтобы получить изображение, которое вы хотите.