How to apply a fixed background in fullpage.js

Question

I am not asking how to make a background image, I know how to do that. I am asking how to apply a fixed background which stays the same throughout the site without moving. Scrolling up/down will move through the slides content. My current code sets the background image to the first slide and the subsequent slides are white.

This is what I have so far:

HTML:

<div id="fullpage">
    <div class="section" id="section0" data-anchor="thisSection0">
        <h1>Section0</h1>
    </div>

    <div class="section" id="section1" data-anchor="thisSection1">
        <h1>Section1</h1>
    </div>

    <div class="section" id="section2" data-anchor="thisSection2">
        <h1>Section2</h1>
    </div>

</div>

CSS

#fullpage {
background-image: url('images/bg1.jpg');
}

SCRIPT

$(document).ready(function(){
     $("#fullpage").fullpage({
         anchors: ['thisSection0', 'thisSection1', 'thisSection2'],
         responsive: 900,
         navigation: true,
         navigationPosition: 'right',
         navigationTooltips: ['Section 0', 'Section 1', 'Section 2']
     });
});

wallop · Accepted Answer · 2015-05-12T09:43:11.817

3

background-attachment is the key. Use

background-attachment: fixed;

Also based on your requirement you will need to play around with background- background-repeat:no-repeat; and background-size:contain/cover; so that the background image looks as you want

JSBin

edited May 12 '15 at 09:43

answered May 12 '15 at 09:33

wallop

2,243
1
19
34

I have tried using this on #fullpage and it does not work. I think it might be somethimg to do with the framework. Any other ideas?? – user3589485 May 12 '15 at 09:37
@user3589485 its got nothing to do with framework. Its a common css property. – wallop May 12 '15 at 09:40
@user3589485 i ve added a jsbin, check that – wallop May 12 '15 at 09:43
4

I managed to solve this with your help but I had to set css3:false in the framework script page and add: background-image: url('images/bg1.jpg'); background-attachment: fixed; to #fullpage AND every #section1, #section2, #section3 in the css. thanks – user3589485 May 12 '15 at 10:05
1

I would also point to [this issue](https://github.com/alvarotrigo/fullPage.js/issues/208) related with a bug in Chrome when using `css3:true` in fullPage.js. – Alvaro May 12 '15 at 10:25

score 0 · Answer 2 · answered May 12 '15 at 09:32

0

You can use the css property fixed for the background attachment: http://www.w3schools.com/cssref/pr_background-attachment.asp

answered May 12 '15 at 09:32

Wolfgang

260
2
11

score 0 · Answer 3 · edited Nov 21 '15 at 13:06

0

Try this:

#fullpage {
    background-image: url('images/bg1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

edited Nov 21 '15 at 13:06

Alex

7,801
5
29
44

answered May 12 '15 at 09:46

vitally

377
5
17

How to apply a fixed background in fullpage.js

3 Answers3