背景画像の後にテキストを配置する（背景サイズ：カバー）

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) 
}