I am trying to create a background image with text overlaid within a column. I have tried to create a div within the col that has a background img and absolute positioned text. This works however it is not responsive. I was hoping the col width would override the background img width but it doesn't. 

My code:

[one_half animation="Fade In From Left" delay=""]

<div style="background-image: url('http://www.carwashcreative.com/client/oshandcarwash/wp-content/uploads/2014/09/giftcardbanner.jpg'); background-repeat: no-repeat; width: 100%; height: 100%;">

<h2 style="position: absolute; top: 2em; left: 15em; width: 120px; padding: 4px; font-size: 2em; color: #FFF; text-shadow: 2px 2px #000;">Get your gift card today!</h2>

<p style="position: absolute; top: 11em; left: 10em; width: 320px; padding: 4px; font-size: 1.4em; color: #FFF; text-shadow: 2px 2px #000;">Get the perfect gift for the car lovers in your life! Good for car washes and details and available in any amount.</p>

</div>

[/one_half]http://carwashcreative.com/client/oshandcarwash/