Full Screen Image with content underneath?

HTML & CSS
1

So I want my site to have a full screen landing page with navigation horizontally at the top. The easiest way to do this seems to be to make a full screen background image and then have the nav over it. The problem though, is that I then want content underneath the full screen image, just out of view. Then when you click a link, the page will scroll to the designated section. How would I accomplish this? Should I use an image sized to full screen instead of a background-image? But then how would I have the nav over top of it?

Thanks

2

Hi,

I have an old codepen example here that shows how to get the initial full screen image and then always have the following content under the fold.

3

Hey, thanks for that. Got that to work, then ended up deciding to go with the background image route since Id like the nav to be over it. My problem now is that I want the image to scale down proportionally, cant seem to get that to work. Iv tried setting the outsite wrapper div to 100% and the height to auto but it doesnt seem to work.

BTW the div sits inside the body tag which I tried setting to 100% width but that didnt help

4

You can use background-size: cover to keep the background image covering the whole div.

These days, you can also set the div to height: 100vh to make sure it fills the whole height of the screen when the page loads.

5

My method above uses a background image and does everything exactly as you need. It uses background-size cover to fill the viewport and the text is on the top of the image as required.

Here is the html and css again.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    margin:0;
    padding:0;
    height:100%
}
body { font-family:Georgia, "Times New Roman", Times, serif }
h1, p { margin:0 0 1em; }
h1 { text-align:center; }
.intro {
    display:table;
    height:100%;
    width:100%;
    margin:auto;
    background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat 50% 50%;
    background-size:cover;
}
.intro .inner {
    display:table-cell;
    vertical-align:top;
    width:100%;
    max-width:none;
}
.content {
    padding:10px;
    background:rgba(255,255,255,0.4);
    max-width:960px;
    margin:auto;
}
.inner {
    max-width:600px;
    margin:auto;
    font-size:140%;
    line-height:1.6;
    padding:10px
}
.page {
    width:80%;
    margin:auto;
}
.page .inner p { padding:2em 0 0 }
</style>
</head>

<body>
<div class="intro">
        <div class="inner">
                <div class="content">
                        <h1>Navigation can go here.</h1>
                        <p>Galaxies shores of the cosmic ocean, rogue from which we spring, dispassionate extraterrestrial observer. White dwarf. Globular star cluster Rig Veda, made in the interiors of collapsing stars emerged into consciousness Drake Equation</p>
                </div>
        </div>
</div>
<div class="page">
        <div class="inner">
                <p>Dream of the mind's eye gathered by gravity, decipherment globular star cluster brain is the seed of intelligence! Are creatures of the cosmos preserve and cherish that pale blue dot Vangelis kindling the energy hidden in matter. Venture light years culture billions upon billions, corpus callosum descended from astronomers two ghostly white figures in coveralls and helmets are soflty dancing Apollonius of Perga. The sky calls to us, inconspicuous motes of rock and gas the only home we've ever known, paroxysm of global death finite but unbounded cosmic fugue paroxysm of global death something incredible is waiting to be known laws of physics, tesseract, encyclopaedia galactica decipherment. Stirred by starlight. Great turbulent clouds decipherment!</p>
        </div>
        <div class="inner">
                <p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
        </div>
</div>

</body>
</html>

You can put your nav where I have the heading with no problem.

The initial image will fill the viewport no matter the size.

6

Thank you for the help guys!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.