title: html text on responsive background image
body: <p>I want to achieve the following:
  <img src="https://i.stack.imgur.com/7xasp.jpg" alt="enter image description here"></p>
  
  <p>Where there is a background image, and a text over it (text position is bootstrap offset-6 col-6)  </p>
  
  <p>And for it to be responsive.  </p>
  
  <p>The thing is, that unlike conventional background, I do care how the background image is truncated, I need the phone to be visible regardless of the width.</p>
  
  <p>I tried: 
  <code>background: url(background-photo.jpg) center center cover no-repeat fixed;</code></p>
  
  <p>And the invisible <code>img</code> trick on <a href="https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size">How to get div height to auto-adjust to background size?</a></p>
  
  <p>In all the cases the phone gets truncated</p>
  
  <p>Assistance will be appreciated</p>
  
  <p><strong>Edit</strong>:<br>
  As requested - the original div structure is:</p>
  
  <pre><code>&lt;div id="hungry"&gt;
      &lt;div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6"&gt;
          &lt;p&gt;Hungry doesn't always happen in the kitchen&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I have no problem changing it to whatever works...</p>