html - Elements not staying inside div (/w image background) -

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

i'm trying create header background image. why every element nest inside being pushed above background image? there better way this?

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

two reasons:

1.) background placement 50% 100px pushed background image 100px down. remove 100px...

2.) margin-top: -50px; on .header. remove or adjust - depending on after when use it.

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

p.s.: filter: blur(1px); blur in .header, not background image (i.e. text). might want remove it...