Elemente nicht in div (/ w Bild Hintergrund) bleiben

Question

http://codepen.io/apswak/pen/qNQxgA

Ich versuche, einen Header mit einem Hintergrundbild zu erstellen. Warum wird jedes Element, in dem ich niste, über das Hintergrundbild geschoben? Gibt es einen besseren Weg, dies zu tun?

<div class="header"> 
    <h1>Lorem ipsum random stoof</h1> 
    <h3>Master.</h3> 
    </div> 

.header { 
    background-color: #222; 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat; 
    background-size: cover; 
    height: 700px; 
    margin-top: -50px; 
    -webkit-filter: blur(1px); 
    -moz-filter: blur(1px); 
    -o-filter: blur(1px); 
    -ms-filter: blur(1px); 
    filter: blur(1px); 
} 

Answer 1

Zwei Gründe:

1.) Die 50% 100px Hintergrund Platzierung schob das Hintergrundbild 100px nach unten. Entfernen Sie einfach die 100px ...

2.) Die margin-top: -50px; on .header. Entfernen Sie es oder passen Sie es an - je nachdem, was Sie bei der Verwendung benötigen.

http://codepen.io/anon/pen/RRqQOr

P. S .: filter: blur(1px); wird alles in .header verschwimmen, nicht nur das Hintergrundbild (das heißt auch der Text). Vielleicht möchten Sie es entfernen ...

Answer 2

Sie haben einen Fehler in Ihrem CSS-Code. Sie haben margin-top:-50px;, die alles für 50px hochzieht. Entfernen Sie diese Zeile oder ändern Sie sie in einen positiven Wert und Sie werden Änderungen sehen!

.header { 
 
    background-color: #222; 
 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat; 
 
    background-size: cover; 
 
    height: 700px; 
 
    margin-top: 10px; 
 
    -webkit-filter: blur(1px); 
 
    -moz-filter: blur(1px); 
 
    -o-filter: blur(1px); 
 
    -ms-filter: blur(1px); 
 
    filter: blur(1px); 
 
}

<div class="header"> 
 
    <h1>Lorem ipsum random stoof</h1> 
 
    <h3>Master.</h3> 
 
    </div>