Как изображение должно быть размером с экран, но у вас есть контент под ним?

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, вы можете использовать 100vw и 100vh установить DIV на высоту окна просмотра/ширина, вместо того, чтобы использовать 100%, а затем просто удалить 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

Используйте следующий CSS на main элемент:

.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% высоты, вы получите тот же эффект без использования ВХ/фольксваген.

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>