Twitter Bootstrap 背景图片填充高度 100%

Question

我有一个顶部带有标准标题的网站，在它下面我想要一个带有背景图像的 div，该 div 的高度填充页面的其余部分。它仍然包含在容器中，因此它并不意味着“全屏”。现在它在 div 中，但仅限于 #products-container 内容的大小。我尝试将行设为 100%（甚至不确定这是否可能），甚至将容器设为 100%。什么都不做。对BS不太熟悉

这位于标准 bs“容器”类中

<div class="row">   
        <div class="col-lg-12"  id="bg">
                <div class="col-lg-3" id="products-container">
                    <div class="op-container"><h1> PRODUCTS</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
                    </div> 

                </div>  <!-- products-container end -->
        </div>   <!-- bg end -->
     </div>

应用的一些css

img {
height: auto;
max-width: 100%;
}

#products-bg {
background-image:url('images/homesplash2.jpg');
background-size:100% 100%;
background-repeat:no-repeat;    
position: relative;
}

这可以用 % 完成吗？

Answer 1

我认为引导程序不允许您这样做。尝试增加自身的图像高度，并在图像上使用 .img-responsive 类。

如果您希望图像覆盖 div，请使用

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;