A CSS slide up splash screen

You can highlight important content and add an aspect of fluidity to a page by creating a slide up effect over your splash content with CSS.

First we need some sample HTML.

<header class="page-header">
    <div>Home | About | Blog</div>
    <h1>Breakfast Time</h1>
</header>
<div class="page-splash">
    <h3>Ham &amp; Eggs</h3>
    <h3>Cheese on toast</h3>
    <h3>Sausage and beans</h3>
</div>
<div class="page-body">
    <p>Choose your perfect breakfast from our wide range of choices.</p>
    ...
</div>

This should go directly inside the page <body></body>. (This sample is not fully mocked out, the navigation links are not marked up and the page-body content should be longer. Lorem ipsum is a choice for testing.

Now, let’s add the CSS.

.body {
    /* Normalize body margin and padding. */
    margin: 0;
    padding: 0;
}

.page-header {
    /* Use fixed to keep the header position the same when the screen scrolls. */
    position: fixed;
    /* Fix to the top of the page. */
    top: 0;
    /* Make sure we fill the body width. */
    width: 100%;
    /* Make sure this will be above other elements. */
    z-index: 10;
    /* Make this big enough to hold the content. */
    height: 5.5em;
    /* Choose your background. It should not be opaque. */
    background-color: #fdf5e6;
}

.page-splash {
    /* Again fix position during scroll. */
    position: fixed;
    /* This should be same as .page-header {height: ...; } */
    top: 5.5em;
    /* Make sure we fill the body width. */
    width: 100%;
    /* Make this go under other elements. */
    z-index: -10;
    /* Make this big enough the hold the content. */
    height: 14em;
    /* Choose your background. */
    background-color: white;
}

.page-body {
    position: relative;
    /* This should be based on .page-header {height: ...; } and
     * .page-splash {height: ...; } */
    top: 19.5em;
    /* Make sure we fill the body width. */
    width: 100%;
    /* Choose your background. It should not be opaque. */
    background-color: #fff5ee;
}

Put a max-width: ...%; on any images to make them responsive.

Demo

View a demo.