Trouble adding div with 100% height, and keeping existing content vertically aligned - html

Question

The below code works as intended (full width background image, with horizontally and vertically aligned text overlapping it), but I want to make a couple of changes. Instead of having a background image for #banner, I want to switch it to a color, and add a div before .teaser that is width: 1366px, height: 100% of parent, and includes a background image set to cover. I still need .teaser vertically aligned though. I've been struggling with this for awhile, so any help would be very much appreciated. http://jsfiddle.net/exczzyje/
HTML
<div id="banner">
<div id="valign">
<div class="teaser">
<h1>Title</h1>
<p>Tagline</p>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
#banner {
width: 100%;
height: 67%;
height: calc(67% - 123px);
background: #000 url('images/banner.jpg') 50% 0 no-repeat;
background-size: cover;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
}
#banner[id] {
display: table;
position: static;
}
#banner #valign {
width: 100%;
position: absolute;
text-align: center;
top: 50%;
}
#banner #valign[id] {
display: table-cell;
position: static;
vertical-align: middle;
}
#banner .teaser {
width: 960px;
margin: -12px auto 0 auto;
padding: 21px 0;
position: relative;
top: -50%;
}
#banner .teaser h1 {
color: #fff;
font-size: 45px;
}
#banner .teaser h1:after {
content: "";
display: block;
width: 42px;
margin: 18px auto;
border-bottom: 3px solid #bfbfbf;
}
#banner .teaser p {
color: #808080;
font-size: 24px;
margin: 0;
text-align: center;
}

Answer 1

Are you looking for something like this:
See JSFiddle
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#banner {
width: 100%;
height: 100%;
background-color: black;
padding: 0;
}
#banner #valign {
width: 100%;
height: 100%;
}
#newDiv {
height: 100%;
width: 1366px;
display: table;
margin: 0 auto;
background: #000 url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') 50% 0 no-repeat;
background-size: cover;
}
#banner .teaser {
display: table-cell;
width: 960px;
margin: 0 auto;
padding: 21px 0;
text-align: center;
vertical-align: middle;
}
#banner .teaser h1 {
color: #fff;
font-size: 45px;
}
#banner .teaser h1:after {
content: "";
display: block;
width: 42px;
margin: 18px auto;
border-bottom: 3px solid #bfbfbf;
}
#banner .teaser p {
color: #808080;
font-size: 24px;
margin: 0;
}

Answer 2

Just add a container around the outside instead.
Updated HTML
<div id="container">
<div id="banner">
<div id="valign">
<div class="teaser">
<h1>Title</h1>
<p>Tagline</p>
</div>
</div>
</div>
</div>
Updated CSS
#container {
width: 100%;
height: 67%;
height: calc(67% - 123px);
background: #000;
margin: 0 auto;
}
#banner {
width: 1366px;
height: 100%;
background: #000 url('images/banner.jpg') 50% 0 no-repeat;
background-size: cover;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
}