CODEWITHSUNDEEP
javascriptcssjsfiddlefullpage.js
The Hawk
The Hawk

Reputation: 1568

FullPage JS Fixed Background Not Working

I'm trying to get a fixed background to work with Fullpage JS. No matter what I do the backgrounds stay there or they don't show up at all. I tried a JS Fiddle but I can't get that to work at all either. https://jsfiddle.net/jpking72/jqa7wapt/9/ 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.js"></script>
    <style type="text/css">

#fullsite {
  background-attachment:fixed;
}

#section1 {
  background:url(/images/pwHoustonDowntown.jpg) no-repeat 0 0 fixed / cover;
}

#section2 {
  background-color:#CCCCCC;
}

#section3 {
  background:url(/images/pwHoustonWindow2.jpg) no-repeat 0 0 fixed / cover ;
}

    </style>
    <script type="text/javascript">

$(document).ready(function () {
  $("#fullsite").fullpage({

})

})

    </script>
</head>
<body>
<div id="fullsite">
  <div class="section" id="section1">
    <h1>
    Section 1
    </h1>
  </div>
  <div class="section" id="section2">
  <h1>
Section 2
  </h1>
  </div>
  <div class="section" id="section3">
  <h1>
  Section 3
  </h1>
  </div>
</div>
</body>
</html>

Upvotes: 1

Views: 1083

Answers (2)

Alvaro
Alvaro

Reputation: 41595

That's a bug in some browsers. Nothing to do with fullpage.js. Fullpage.js uses the translate3d property of css3 which is the one causing the bug in some browsers.

To solve it you have two options:

  • Use css3:false in fullpage.js options. It won't go as fluid, but you'll have your fixed background working.
  • Use scrollBar:true. You'll get a scrollbar and it might not go as fluid as well.

As you can see in the fixedBackgrounds.html provided in in fullpgae.js, it uses css3:false.

        $('#fullpage').fullpage({
            verticalCentered: false,
            //to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
            css3:false
        });

Upvotes: 3

user256968
user256968

Reputation: 371

You need to include jquery into your project. Jquery should be included first

$(document).ready(function () {
     $("#fullsite").fullpage({

     });
});

Upvotes: 0

Related Questions