如何在图像上应用文本并使图像基于文本响应？

Question

我有一个文本字段存在于图像上。每当用户添加到我的Rails应用程序中的文本字段时，它就会按下我想要的文本框。但是，我希望文本框永久保留在图像上并使图像向下延伸。所以图像真的需要成为文本框的灵活容器。

现在我有以下代码。

.img {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

.something-img {
  width: 100%;
  height: auto;
}

.something-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  height: 100%;
} 

.bottom-box {
  background:green;
}

<div class="container-fluid">
  <div class="row">
    <div class="container">
          <img class="img-responsive something-img" src="http://placehold.it/900x100" />
          <div class="col-sm-8 something-text text-center">
            <h1>Header</h1>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p><p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
            <p>Here are some words but typically a lot more are present here.</p>
          </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 bottom-box">
      <h2>Words Go Here</h2>
    </div>
  </div>
  </div>

它的工作原理是文本框位于图像顶部，但无法将图像向下推，而其他部分也无法向下移动。这可以通过简单的CSS解决吗？

编辑： 我无法对该部分进行背景图像。