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

Question

我有一个顶部带有标准页眉的网站，我希望在它下面有一个带有背景图像的 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

我认为 bootstrap 不允许你这样做。尝试增加图像本身的高度并在图像上使用可能的 .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;