如何基于图像命题在图像上缩放文本（响应式CSS）

Question

我正在尝试使下面的图像和文本响应，以便在缩放时看起来类似于以下内容。

http://i58.tinypic.com/6q9kpe.png

然而，当我缩小它时，它看起来比较规模。

http://i57.tinypic.com/s60mjm.png

我找到了一个解决方案here。 但是它与所有浏览器都不兼容。它使用vw作为标准尚未发布的字体。

另一个解决方案是this。但由于某种原因，它对我不起作用。

我的HTML看起来像这样。

  <div class="red-arrow-bg">
      <div class="text-left">
           <h1>Step 1</h1>  
      </div>   
  </div>

和CSS

.red-arrow-bg{
    background: #EEE url("../img/step-bg-arrow-red.png") no-repeat;
    width: 100%;
    background-position: left -71% center;
   cackground-size: contain;
    padding: 2% 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.text-left {
    padding: 30px 0;
}

.text-left h1{
    line-height: 150%;
    position: absolute;
    bottom: 8px;
    color: #FFF;
    margin-left: 26%;
}