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。小提琴没有正确显示结果，这是我的意思截图。我需要它在它所包含的小提琴中工作（这样背景图像的高度扩展甚至超过浏览器的当前高度，但在Chrome和Mozilla中，它都用完了。参见示例{{ 3}}和full screen。

请帮忙

EDIT 这是整个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%;}定义。

Answer 2

如果您尝试完成与CSS-Tricks示例相同的操作，则必须执行相同的操作

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;
}

全屏背景 - 包含元素

2 个答案:

全屏背景 - 包​​含元素

2 个答案:

全屏背景 - 包含元素