イメージを画面のサイズにする方法はありますが、その下にコンテンツがありますか？

Question

ページを読み込むときに、画像を画面のサイズにしたい。私はこれを得ましたが、他のテキストはイメージの下ではなくイメージの下にあります（うまくいけば意味があります）。

.main { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg); 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
}

<div class="main"> 
 

 
</div> 
 

 
<h1>Hello World</h1> 
 

 
<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

Answer 1

何が必要ブラウザのサポートに依存します。あなたはブラウザのサポートhereでOKであれば、あなたの代わりに100%を使用しての、ビューポートの高さ/幅にDIVを設定する100vwと100vhを使用することができ、そしてここに見られるように、単に、position: absolute;を削除します。

.main { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg); 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
}

<div class="main"> 
 

 
</div> 
 

 
<h1>Hello World</h1> 
 

 
<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

Answer 2

main要素に以下のCSSを使用します。

.main { 
    width: 100vw; 
    height: 100vh; 
    background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg); 
    background-size: cover; 
    background-position: 50% 50%; 
} 

ありませんe：no position: absolute！

.main { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg); 
 
\t background-size: cover; 
 
\t background-position: 50% 50%; 
 
}

<div class="main"> 
 

 
</div> 
 

 
<h1>Hello World</h1> 
 

 
<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

Answer 3

htmlと体が100％の高さを持っている場合は、VH/VWを使用せずに同じ効果を得ます。

html,body{height: 100%;} 
 
.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg); 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
}

<div class="main"></div> 
 
<h1>Hello World</h1> 
 
<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>