How to make first page fullscreen and others not [closed]

StackOverflow https://stackoverflow.com/questions/21425003

Question

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.

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top