How to scale text on image based on proposition of image (responsive CSS)

Question

I am trying to make following image and text responsive so that when it scale it looks similar to the following.

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

However when I scale it down it looks scale to this.

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

I have found one solution here. However it is not compatible with all the browsers. It is using vw for font which is not yet even released as a standard.

The other solution is this. But for some reason it does not work for me.

My HTML looks like this.

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

And the 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%;
}