フルページの背景画像と垂直スクロール

Question

背景画像がブラウザの画面サイズに反応するページを作成しようとしています。しかし、その人の下にスクロールすると背景イメージが終了するようなイメージの下にコンテンツが必要です。

それはので、私はそれをより明確にするために画像を作成しようとした説明するのは難しい：

HTML：：

<div class='image'></div> 
<div class='content'>Content</div> 

使用絶対

Answer 1

このFiddleをお試しくださいバックグラウンドイメージを画面と同じサイズにするように配置し、後にコンテンツを配置します。topはです：

body { 
    margin:0; 
} 
.image { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:green; 
    background-image:url('some-image.jpg'); 
    background-size:cover; 
} 
.content { 
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px; 
} 

Answer 2

TB11が示唆するようにposition: absoluteための必要はありません。

ビューポート単位を使用して、またはhtml、body、およびimage要素の高さを設定するだけで、ビューポートの高さを設定することができます。

body { margin: 0; } 
.image { 
    width:100vw; 
    height: 100vh; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
} 

---

あなたがvhを使用できない場合は、あなたが使用できるようにもhtmlと体の要素の高さを設定する必要があります：Demoとsupport chartからvhを使用して

パーセント - Demo：

html, body, .image { height: 100%; } 
body { margin: 0; } 
.image { 
    width:100%; 
    background: green; 
    background-image: url('some-image.jpg'); 
    background-size: cover; 
}