寻找一种创建具有重叠文本的Web布局的方法

Question

我正在尝试构建以下布局：

屏幕左半部分的背景颜色，屏幕右半部分的图像和重叠文字：

我正在使用Drupal以基于引导程序的主题。

我尝试通过将图像设置为尺寸为50％100％的背景图像和位置：向右来进行构建，但这不会保持图像比例。
我也尝试将文本放在col-6中，将图像放在col-6中，当我应用display：-moz-box，position：relative和z-index：999时，它会起作用，但感觉不错hacky，我不知道这是不是正确的做法。

是否可以通过使用bootstrap嵌套来构建这样的布局，文本与背景颜色和背景图像重叠？

谢谢！

Answer 1

首先，您应该使用引导网格

将页面分成两部分

<div class="header row">
  <div class="header__left col-sm-6">
    <h1>Shinny homepage</h1>
  </div>
  <div class="header__right col-sm-6"></div>
</div>

其次，您必须确保此2列保持相同的高度。 例如，您添加规则以将标题高度设置为屏幕高度。

.header {
  height: 100vh;
}
.header__left,
.header__right {
  height: 100%;
}

第三，向右侧单元格添加cover大小的背景

.header__right {
  background-image: url();
  background-size: cover;
}

在此处查看实时示例：http://codepen.io/tzi/pen/jWKOdN