title: Responsive grid overlaying an image and text div onto another responsive image
body: <p>I need a full width responsive background image to be displayed, which i've done already like so.
      
  and I have the style for that 
      img {height: auto, width: 100%}</p>
  
  <p>What I need to do next is the hard part that I've been trying for most of the day.
  I have another image and a div of text that I need to be overplayed on top of the main image, but still hold its responsiveness because its in a grid of col-3 and col-9</p>
  
  <p>I've tried absolutely positioning the 2 elements but either I can't align them properly, or they're losing their containers. I'll paste my current html code, I'm really lost now as to what to try next. I've also tried setting the main bg in the css but obviously that loses the height because theres nothing in there and the div collapses.</p>
  
  <pre><code>&lt;section&gt;
  &lt;div id="image-container"&gt;
  &lt;img src="assets/img/bg.jpg"&gt;     
  &lt;div class="container"&gt;
  &lt;div class="row clearfix"&gt;
  &lt;div class="col span_3_of_12 image-move"&gt;
  &lt;img src="assets/img/alice.png"&gt;
  &lt;/div&gt;
  &lt;div class="col span_9_of_12"&gt;
  &lt;p class="comments"&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!--image-container--&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I just did this up quickly as an example in photoshop and uploaded it here.
  <a href="http://imgur.com/OULX1sZ" rel="nofollow">http://imgur.com/OULX1sZ</a></p>