Search code examples
jquerycsshtmlfullscreenfullpage.js

How to make first page fullscreen and others not


I would like to make the first page of an HTML5/CSS/JS Website staying always fullscreen with an background image and the following pages should stay normal.

For example like here: http://www.newkorando.ch/newlove/

I made a quick mockup of what i mean: enter image description here

Any ideas how this can be done? I tried fullPage.js but it does not work with the other pages.


Solution

  • That's not a "first-page".

    <html> and <body>are set to 100% height, and then its content is set to overflow out of the body.

    The first child in the list of children has a height of at least 100% (which is 100% of the parent-height, which is 100% of the browser height).
    The rest of the children have auto-defined heights based on their contents.

    There are several ways of getting this end result, using position:fixed or position:absolute, et cetera.