Текст позиции после фонового изображения (размер фона: обложка)

Question

Я пытаюсь разместить заголовок своего веб-сайта в качестве полного фонового изображения, но все же позволяю пользователю прокручивать вниз до следующего раздела веб-сайта. Я использую фоновое изображение тела для предотвращения любого белого кадра/поля вокруг изображения, но вам нужно разместить содержимое после (и поверх) изображения.

Вот HTML:

<header> 
    <h1>Olivia E Thorne</h1> 
    <p>Brighton, UK</p> 
</header> 


</body> 
</html> 

Вот CSS:

body { 
    background:url('header.png') #A98436 no-repeat; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
} 

header{ 
    position: fixed; 
    color: whitesmoke; 
    font-family: "Segoe UI"; 
    font-size: 1em; 
    line-height: 50%; 
    top: 35%; 
    left: 45%; 
    z-index: 100; 
} 

Я не включил заголовок на изображение, как я в конечном итоге будет анимировать его, поэтому он должен быть расположенным поверх изображения. Мне также необходимо предотвратить появление каких-либо белых «кадров» вокруг изображения (поэтому его непосредственное размещение в HTML не сработало).

Answer 1

<header> 
<h1>Olivia E Thorne</h1> 
<p>Brighton, UK</p> 
</header> 
<div class="next"> <p>Some content...</p></div> 
</body> 
</html> 

и CSS:

body { 
background:url('header.png') #A98436 no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
} 

header{ 
position: fixed; 
color: whitesmoke; 
font-family: "Segoe UI"; 
font-size: 1em; 
line-height: 50%; 
top: 35%; 
left: 45%; 
z-index: 100; 
} 
.next{ 
position:relative; 
top: 500px; (or 50% or whatever the height of the pic is) 
}