如何将背景图像放在col-md中

时间:2014-03-26 22:27:20

标签: twitter-bootstrap twitter-bootstrap-3

为了澄清我的问题,我将附上下面的草图:

Sketch

我想使用twitter-bootstrap将背景图像放在col-md中。主要问题是如何将其置于col-md-7中。它的必要条件是图像必须在所有位于col-md-7的地方都可见,并且包含100%的高度。

我是twitter-bootstrap的初学者,我不确定col-md类是否可以让它的高度延伸到页面底部。如果不是,使用bootstrap解决这个问题的解决方案是什么?

在我的代码下面:

index.html.erb

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-7">
          <div class="container-fluid css_image_home"></div>
        </div>
        <div class="col-md-5">
          ...
                </div>
    </div>
</div>

home.css.scss

div.css_image_home{
  position:absolute;
  background:url('images/wordcloud.jpg') no-repeat top left fixed;
}

我希望提供解决这个问题所需的所有信息。如果缺少某些东西,请告诉我,我会尽快提供。

最好的问候。

1 个答案:

答案 0 :(得分:1)

<强> http://www.bootply.com/125213

任何带有背景图像的DIV容器也需要100%高度(body,html,.container-fluid等)。

html,body {
    height:100%;
}

.container-fluid,.col-md-7,.row {
    height:100%;
}

此外,Bootstrap 3中没有row-fluid