Position Text nach Hintergrundbild (Hintergrundgröße: cover)

Question

Ich versuche, meine Website-Header als ein vollständiges Hintergrundbild zu platzieren, aber immer noch den Benutzer in den nächsten Abschnitt der Website nach unten scrollen. Ich benutze body background-image, um einen weißen Rahmen/Rand um das Bild herum zu vermeiden, muss aber den Inhalt nach (und über) dem Bild platzieren. Hier

ist die HTML:

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


</body> 
</html> 

Hier ist die 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; 
} 

ich nicht den Header auf das Bild aufgenommen haben, wie ich es schließlich Animieren wird, so muss es in der Lage sein, über dem Bild positioniert zu werden. Ich muss auch irgendwelche weißen "Rahmen" um das Bild herum verhindern (so dass es direkt in den HTML-Code eingefügt wurde, hat nicht funktioniert).

Answer 1

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

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