Full Screen Background - contain element - html

Question

I have a section of a website where I need a full screen background image. I used the trick from CSS Tricks - the first option. That works fine, but I have some content in that section and it is not contained. so if the height is reduced, but the width at max on a screen, the content of that section overflows. Is there any smart way of containing that content so that it reduces by height as well?
This is the CSS I'm using.
background: url('https://dl.dropboxusercontent.com/u/72385383/services-header-bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
See example fiddle.
The fiddle doesn't show the result properly, here is a screenshot of what I mean. I need it to work as in the fiddle where it's contained (so that the background image expands in height even more than the current height of the browser, but in both Chrome and Mozilla, it runs out. See example full screen and reduced.
Please help
EDIT
Here is the entire HTML
<div id="services-header">
<div class="container">
<div class="row">
<div class="col-xs-12" style="height: 100%;">
<h1>
The Creativity of the West meet <br>
the Technical Skill & Expertise of the East
</h1>
<p>
Our extraordinary team brings years of technology related experience to the table to ensure <br>
that you receive an amazing product at an unbelievable price. <br><br>
</p>
<img src="https://dl.dropboxusercontent.com/u/72385383/platforms.png" alt="Platforms"> <br><br><br><br><br><br>
<img src="https://dl.dropboxusercontent.com/u/72385383/iphone6.png" alt="iPhone APPR">
</div>
</div>
</div>
</div>
<div id="services-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>What we can do for you</h1>
</div>
</div>
<div class="row service-row">
<img src="https://dl.dropboxusercontent.com/u/72385383/s-creative.jpg" alt="">
<p class="service">
Mobile Application <br>
Design & Development
</p>
<p class="desc">(iOS — Android — Windows)</p>
</div>
</div>
</div>
And here is the CSS:
body {
margin: 0;
padding: 0;
}
img {max-width: 100%;}
#services-header{
background: url('https://dl.dropboxusercontent.com/u/72385383/services-header-bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
text-align: center;
font-weight: 300;
color: #ffffff;
}
#services-header h1 {
font-size: 56px;
padding-top: 60px;
font-weight: 300;
line-height: 120%;
margin-bottom: .3em;
}
#services-header p {
font-size: 24px;
}
#services-content h1 {
font-size: 56px;
font-weight: 300;
text-align: center;
}
#services-content img {
display: block;
margin: 10px auto;
}
#services-content p.service {
font-weight: 600;
text-align: center;
}
#services-content p.service a{
font-weight: 600;
text-align: center;
color: #f93434;
cursor: pointer;
}
#services-content p.desc {
font-weight: 300;
text-align: center;
}
.service-row {
margin-bottom: 50px;
}
footer.services-page {
background: #000000;
padding: 20px 40px;
color: #ffffff;
font-weight: 300;
}
span.copyright {
}
span.footer-contact {
float: right;
}
span.footer-contact a {
margin-right: 30px;
color: #ffffff;
cursor: pointer;
}

Answer 1

The problem was that Mozilla needed a body {height:100%;} definition.

Answer 2

If you're trying to accomplish the same as the CSS-Tricks example you have to do the same
html{
background: url('https://dl.dropboxusercontent.com/u/72385383/services-header-bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}