Full screen element

I’m trying come up with how to get a fullscreen intro element that is fullscrenn in any size of the browser window? And when you start scrolling, you can see the rest of the homepage. Please have a look at the example link below.

https://mtrexpress.se/sv

They are using a movie, but I’m just interested in a simple div and use a background image that cover the screen. I have tried to analyze the webpage, and I guess they are not using any background poperties, instead just a div with different layers? Would be interesting to learn how this is done.

I made a simple test, and I filled it with lot of dummy text(I removed all the text before I pasted the code here), but i seems like the intre div stays fullscreen and I can’t scroll to the rest of the page.

<!DOCTYPE html>
<html>
<head>
<style>
#intro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
 <div id="intro">Intro</div>
<div class="container">Page content</div>
</body>
</html>


Source: html

Leave a Reply