响应网格将图像和文本div叠加到另一个响应图像上

Question

我需要显示全宽响应背景图像，我已经这样做了。      我有那种风格     img {height：auto，width：100％}

接下来我需要做的是我一天中大部分时间都在尝试的难点。 我有另一个图像和一段文本，我需要在主图像上重叠，但仍保持其响应性，因为它在col-3和col-9的网格中

我已经尝试过绝对定位2个元素，但要么我不能正确对齐它们，要么它们会丢失它们的容器。我将粘贴我当前的HTML代码，我现在真的输掉了接下来要尝试的内容。我也尝试在css中设置主要的bg，但显然失去了高度，因为那里没有任何东西而且div崩溃了。

<section>
<div id="image-container">
<img src="assets/img/bg.jpg">     
<div class="container">
<div class="row clearfix">
<div class="col span_3_of_12 image-move">
<img src="assets/img/alice.png">
</div>
<div class="col span_9_of_12">
<p class="comments">
</p>
</div>
</div>
</div>
</div><!--image-container-->
</section>

我刚刚在photoshop中快速做了这个并将其上传到此处。 http://imgur.com/OULX1sZ