Header banner in html and css

Question

I'm getting frustrated with this responsive web design. I'm trying to create a banner for a one page site that i'm trying to build (for exercise purpose).

Instead of making the image as a background of the header, i wrote it inside the header tag in the html, making it look like a banner is not that hard for me but i wanna put some text on top of the image and it works perfectly fine with absolute positioning of the 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 i try to resize the browser they go missing. Any technique on making a header banner?

Answer 1

Look into what happens when you place a position:absolute element within a position:relative one. This should give you what you need.

Your positions are currently relative to the whole screen rather than the outer banner area - which means as the screen changes size, the whole thing jumps about regardless of the image height.

If you make the outer element of the banner position:relative, then they will then be in relation to the dimensions of the this banner area, not the screen.

Answer 2

I think this should work. https://jsfiddle.net/1c8qy7bo/

HTML:

<header>
  <div class="container">
  <img align="center" src="http://www.improntaunika.it/wp-content/uploads/2014/09/moutain.jpg"/>
  <h1> AAAAAAAAA </h1>
  <h2>BBBBBBBBBBBBB</h2>
  </div>
</header>

CSS:

header{
    width:100%;
    position: absolute;
    background: #f5f5f5;
    height: 14%;
    background-position: 100%;
    min-height: 80px;
    min-width: 300px;
}

   img{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 50%;
  margin-right: -50px;
   }

h1{
  position: absolute;
  font-size: 10px;
  right: 50%;
  margin-right: -50px;

}
h2{
  position: absolute;
  font-size: 10px;
  right: 50%;
  margin-right: -50px;
  top:50%;
}

Comment if you have a question. I hope this will be usefull.