Bootstrap: Overlay A Heading Over A Full-Width Image - css

Question

I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }

Answer 1

The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}