背景图片在半页中自动调整

Question

我正在尝试复制像this page那样的设计，所以基本上将页面拆分为两个，在一半的div上，图像作为背景填充所有这一半，在下半部分文本。

我尝试使用我可以在浏览器中看到的css，将其与bootsrap混合使用。所有这些都变成了Drupal视图，但这是一个非常不相关的信息。 我做的是：

<div class="container">
  <div class="row" style="height: auto;" >
    <div class="col-sm-6" style="background-image: url('[field_image]');background-attachment: fixed; background-position: 0% 50%;  background-repeat: no-repeat;width: 50%; height: 100%; background-size: 50% auto"></div>
    <div class="col-sm-6 txt" ><p>[body]</p> </div>
  </div>
</div>

但它的行为与我所指的页面不同。 我认为它与某种高度有关：100％的行类。

另一个问题是：如果我在两个图像的中间滚动，如果在该页面上滚动，我怎么能让页面只关注一个部分？

问候。