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 draw a CSS petagon with all borders radius?

    How to use background css for an image not in the Content or Resource folder

    How to force a div to honor its constraints and put things into overflow instead of resizing a column?

    How to override the width property in css [closed]

    How to style 404 page in WAMP server

    How to recreate this image using css

    How to make div layer unselectable in jquery and css

    How to include .css file in smarty template file?

    How to detect mouse is over a child element in jQuery?

    How an mobile compatible website handles the performance?

    How will I change CSS based on classes and id using jQuery

    How can I get the second line of text to hide and show on hover? CSS only

    How to Mask Images with Dynamic Sizes to Shapes?

    How to force html/css padding/margin on an element?

    How to apply SVG so that it works in IE background image

    How much overflow in a DOM element

    How to make CSS scroll panel for custom purposes?

    How to remove the background in a slick carousel?

    How do I change the css overflow property of the HTML with javascript

    How to create such (see image below) effect using pure HTML JS and CSS?

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    How to center absolute div (text) above relative div (image) responsively?

    How to appear two HTML input elements in single line (row)

    Why my easypie number don't show inside?

    How to align content of a div to the bottom?

    How can I flip multiple div at same time?

    how to embed css in sass, or use + selector in sass?

    How to use Bootstrap CDN?

    How to get rid of !important tags?

    How to theorize about this phenomenon about
    tag