Header banner in html and css -

i'm getting frustrated responsive web design. i'm trying create banner 1 page site i'm trying build (for exercise purpose).

instead of making image background of header, wrote inside header tag in html, making banner not hard me wanna put text on top of image , works fine absolute positioning of hgroups.

header#main img{      max-width: 100%;      max-height: auto;      opacity: 2;      margin: 0 auto;  }    header#main hgroup h1{      position: absolute;      top: 50%;      left: 20%;      opacity: .5;      margin-top: 0;      color: #e7e7e7;      font-size: 3.5em;      font-family: 'open sans';      font-weight: lighter;      max-width: 100%;      margin: auto;  }    header#main hgroup h2{      font-family: 'open sans';      opacity: .9;      font-style: italic;      color: #e7e7e7;      font-size: 1em;      font-family: 'open sans';      font-weight: lighter;      text-align: justify;      position: absolute;      top: 60%;      left: 42%;      max-width: 100%;      margin: auto;  }

<header id="main">      <img src="imgs/mountain.jpg"/>      <hgroup>          <h1>title</h1>          <h2> subtitle </h2>      </hgroup>  </header>    

and when try resize browser go missing. technique on making header banner?

look happens when place position:absolute element within position:relative one. should give need.

your positions relative whole screen rather outer banner area - means screen changes size, whole thing jumps regardless of image height.

if make outer element of banner position:relative, then in relation dimensions of banner area, not screen.