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


Tags: jquery,css,html5,fullscreen,fullpage.js

Problem :

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.


    CSS Howto..

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to Align all inputs in a Form

    How can I reposition a DIV with jQuery? [closed]

    How do I isolate floated content?

    How to set font family and size in html/css

    How to move div to top and remove?

    How can I make buttons flash different background colors when clicked/

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?

    How to give border a single border for two adjacent cells in css

    How to start css animation on speciefic height of webpage

    How to keep a floating div centered on window resize (jQuery/CSS)

    How to align css class using bootstrap

    How important is it to be leaving out the last ';' inside a set of CSS rules

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    How to format XML file with CSS?

    Show a specific image on click

    How can i make 3 independently scrollable columns

    How to make header/body/footer 'popup' div with variable height body?

    How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    How to make my right-box float right…?

    How to get every line of text / elements of a page centered horizontally?

    How can I create alike css classes [duplicate]

    How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?

    how to center text AND have max width of 800px in CSS?

    How to override html property created by script (mediaelement.js)

    How do I make numbered paragraphs (HTML5/CSS3)

    How to check “IF any one or all buttons are clicked” in jquery

    css how to make an elements margin-bottom go to bottom of its container

    How to create a relative inline style?