title: Scale div to the height of background-image
body: <p>I am trying to put the image as a background image and some text on a Background. The problem is: the height of div has to be the same as the background image height.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="pict-cont"&gt;
      &lt;div class="text"&gt;enter code here`
          &lt;p style="color: #333"&gt;some text some text some text&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.pict-cont {   
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Dresdner_Elblforenz_bei_D%C3%A4mmerung%2C_2008.jpg/330px-Dresdner_Elblforenz_bei_D%C3%A4mmerung%2C_2008.jpg');
      background-color: #333;
      height: 1024px;
      background-size: 100% auto;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>Here is my fiddle: <a href="https://jsfiddle.net/innpe/4b7bc2y6/1/" rel="nofollow noreferrer">https://jsfiddle.net/innpe/4b7bc2y6/1/</a></p>