CODEWITHSUNDEEP
htmlscrollfullscreenviewport
user2106931
user2106931

Reputation: 11

How to create a fullscreen div until scroll?

I'm brand new to this site so apologies if I'm stepping on toes but I've been trying to create a page where you are met by a fullscreen header, with a height and width of 100% of the viewport, however you are still able to scroll to the content below.

Perfect example of this is http://www.bklynsoap.com/

I have tried to achieve this with purely CSS by creating a 100% height and width on an absolute positioned Div, but this hides the content below.

Upvotes: 1

Views: 2388

Answers (1)

Nobol Creative
Nobol Creative

Reputation: 11

No need for absolute position in this. Your example uses javascript to change the size of the div and the content inside.

You can do this with pure CSS

Example:

<html>
   <body>
     <section class="fullscreen"></section>
     <section class="other-content></section>
   </body>
</html>



html {
 height: 100%;
}

body {
 height: 100%;
}

.fullscrenn {
  height: 100%;
  width: 100%;
  background: url('../images/fullscreen.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
}

Upvotes: 1

Related Questions