title: Responsive CSS background image
body: <p>Simple concept, I'd like to have a responsive CSS background image that scales at a 1:1 width/height ratio within a browser window, this is the easy part</p>
  
  <pre><code>body{
      height:100%;
  }
  
  .banner{
      height:100%;
      background: url('path/to/img') center center no-repeat;
      background-size:contain;
  }
  
  &lt;body&gt;
      &lt;div class="banner"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>the problem is I also want to place text inside the background container with word wrapping, and have the height of the background image flow height wise with the text as a browser window resizes.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="banner"&gt;
          &lt;p&gt;
              Lorem ipsum dolor sit amet, in eos idque epicuri...
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is this possible with pure CSS/HTML?</p>