Question

我有一个标准页眉顶部的网站，在它下面我想要一个带有背景图像的div填充页面的其余部分。它仍然包含在容器中，因此它并不意味着全屏＆＃34;。现在它在div中，但它仅限于＃products-container内容的大小。我尝试将行100％（甚至不确定是否可行）甚至100％的容器。什么都不做。不熟悉BS

这属于标准的bs＆＃34;容器＆＃34;类

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

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

1 个答案: