html - 全屏背景 - 包​​含元素

Question

我在网站的某个部分需要全屏背景图片。我使用了 CSS Tricks 中的技巧——第一个选项。这很好用，但我在该部分中有一些内容，但未包含在内。因此，如果高度降低，但屏幕上的宽度最大，则该部分的内容会溢出。是否有任何聪明的方法来包含该内容，以便它也减少高度？

这是我正在使用的 CSS。

    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;

参见示例 fiddle。 fiddle 没有正确显示结果，这是我的意思的截图。我需要它像包含它的 fiddle 一样工作(以便背景图像的高度扩展甚至超过浏览器的当前高度，但在 Chrome 和 Mozilla 中，它都用完了。参见示例 full screen 和 reduced 。

请帮忙

编辑 这是整个 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 &amp; 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 &amp; Development
                </p>
                <p class="desc">(iOS — Android — Windows)</p>


        </div>
    </div>
</div>

这是 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

问题是 Mozilla 需要一个 body {height:100%;} 定义。