fullPage.js, фон и divs не работают должным образом

Question

Я пытаюсь изменить фон первого раздела, а также включить два полных раздела в секцию. Фон не будет отображаться, и только половина других divs покажет, все остальное будет белым.

HTML:

<div class="section" id="section0"> 
    <div class="intro"> 
     <div class="bg"></div> 
     <div class="bg hidden"></div> 
     <div class="introtext"> 
      <h1></h1> 
      <h2></h2> 
     </div> 
    </div> 
</div> 

CSS:

.bg { 
    opacity:0.5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-transition: opacity 5s; 
    -moz-transition: opacity 5s; 
    transition: opacity 5s; 
} 

.hidden { opacity: 0; margin-top:-50%;} 

#section0 { 

    background-image:url(img/1.jpg); 
    margin: 0; 
    width:100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center center; 
    background-attachment: fixed; 
} 

писать, если вам нужна дополнительная информация, будет бесконечно благодарен, если кто-то может понять это.

Answer 1

Удалить position: absolute; из .bg CSS

Также браузеры не уважают высоту в процентах height: 100% вы должны добавить содержимое в свой DIV или установить высоту в пикселях множеством мин-высота или макс высота напр: min-height: 100px;

Вот такой fiddle