css - fullpage.js - Gradient Backgrounds not applying to sections without slides -

css - fullpage.js - Gradient Backgrounds not applying to sections without slides -

i need help in fixing issue facing while using fullpage.js plugin create static html page gradient backgrounds.

the issue when using gradient backgrounds demonstrated in gradient backgrounds gradient style gets applied correctly slides nested under section, sections without slides shows white background.

i tried removing custom css styles added , debugging plugin's javascript source code not find root cause problem beingness faced.ultimately opened issue in repository same asking help plugin author has responded looks css issue , there no problem in plugin because demo page working.

the code having problem can found below , @ http://codepen.io/jigneshgohel/pen/vrxuz

html

<div id="header"> <ul id="menu"> <li data-menuanchor="section1"><a href="#section1">section1</a></li> <li data-menuanchor="section2"><a href="#section2">section2</a></li> </ul> <div id="logo"> <a href="#section0"> <img width="200" height="40" alt="logo" src="css/imgs/logo.jpg" /> </a> </div> </div> <div id="footer">footer</div> <div id="content"> <div class="section" id="#section0"> section 0 content </div> <div class="section" id="#section1"> <div class="slide" id="slide1"> section 1 slide 1 content </div> <div class="slide" id="slide2"> section 1 slide 2 content </div> <div class="slide" id="slide3"> section 1 slide 3 content </div> </div> <div class="section" id="#section2"> section 2 content </div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/jquery.fullpage.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/vendors/jquery.easings.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/vendors/jquery.slimscroll.min.js"></script> <script type="text/javascript"> $('#content').fullpage({ anchors: ['section0', 'section1', 'section2'], //sectionscolor: ['#c63d0f', '#1bbc9b', '#7e8f7c'], css3: true, scrolloverflow: true }); </script>

custom css

/* custom styles */ #menu li { display:inline-block; margin: 10px; color: #000; background:#fff; background: rgba(255,255,255, 0.5); -webkit-border-radius: 10px; border-radius: 10px; } #menu li.active{ background:#666; background: rgba(0,0,0, 0.5); color: #fff; } #menu li a{ text-decoration:none; color: #000; } #menu li.active a:hover{ color: #000; } #menu li:hover{ background: rgba(255,255,255, 0.8); } #menu li a, #menu li.active a{ padding: 2px 18px; display:block; } #menu li.active a{ color: #fff; } #menu{ position:fixed; top:0; left:0; height: 40px; z-index: 70; width: 80%; padding: 19px; margin:0; } /* centered texts in each section * --------------------------------------- */ .section{ text-align:center; } /* fixed header , footer. * --------------------------------------- */ #header, #footer{ position:fixed; /*height: 50px;*/ display:block; width: 100%; background: #333; z-index:9; text-align:center; color: #f2f2f2; padding: 20px 0 0 0; } #header{ top:0px; height: 60px; text-align: left; } #footer{ bottom:0px; height: 60px; } #logo { position: relative; left: 80%; height: 40px; z-index: 70; width: 20%; } #logo a{ text-decoration:none; color: #000; padding: 2px 18px; display:block; } #logo a:hover{ color: #000; } #logo img { max-width: 100%; } /* defining each section background , styles * --------------------------------------- */ #section0{ background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe)); background: -webkit-linear-gradient(#4bbfc3, #7baabe); background: linear-gradient(#4bbfc3,#7baabe); } #section2 { background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#636f8f)); background: -webkit-linear-gradient(#969ac6, #636f8f); background: linear-gradient(#969ac6,#636f8f); } /*adding background slides * --------------------------------------- */ #slide1{ background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6)); background: -webkit-linear-gradient(#7baabe, #969ac6); background: linear-gradient(#7baabe,#969ac6); } #slide2{ background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd)); background: -webkit-linear-gradient(#92a1ca, #76c2bd); background: linear-gradient(#92a1ca,#76c2bd); } #slide3{ background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd)); background: -webkit-linear-gradient(#92a1ca, #76c2bd); background: linear-gradient(#92a1ca,#76c2bd); }

i not @ working css neither fixing related issues.this can seen seen css code have written collecting bits , pieces of css plugin's examples , tweaking per needs. requesting help stackoverflow community.

thanks,

jignesh

i found problem.it wrong div id caused issue.

<div id="content"> <div class="section" id="#section0"> section 0 content </div> <div class="section" id="#section1"> <div class="slide" id="slide1"> section 1 slide 1 content </div> <div class="slide" id="slide2"> section 1 slide 2 content </div> <div class="slide" id="slide3"> section 1 slide 3 content </div> </div> <div class="section" id="#section2"> section 2 content </div> </div>

instead of #section0, #section1, #section2 should have been section0, section1, section2.

thanks, jignesh

css gradient fullpage.js