1

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.

4

1 に答える 1

1

これには絶対的な位置は必要ありません。この例では、javascript を使用して div のサイズと内部のコンテンツを変更しています。

純粋なCSSでこれを行うことができます

例：

<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;
}
于 2013-10-20T20:19:35.567 に答える