title: How to set background image using picture tag and src set
body: <p>how to set image as background to div.So that div should take height of image.This functionality need to be implemented using picture tag and srcset attribute in HTML.And if some text overlays on the image then the image should remain in same height but the div height should grow with the text.
  Below is code i tried but my div height is not increasing</p>
  
  <pre><code>&lt;style&gt;
  .image { 
     position: relative; 
     width: 100%; /* for IE 6 */
  }
  
  .info{ 
     position: absolute; 
     top: 200px; 
     left: 0; 
     width: 100%; 
     color: yellow;
  }
  
  
  
  &lt;/style&gt;
  &lt;script src="picturefill.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="image"&gt;
      &lt;picture&gt;
          &lt;source srcset="new-york-city-wallpapers-desk.jpeg" media="(min-width: 1240px)"&gt;
          &lt;source srcset="new-york-city-wallpapers-tab.jpeg" media="(min-width: 940px)"&gt;
          &lt;source srcset="new-york-city-wallpapers-mob.jpeg" media="(min-width: 724px)"&gt;
  
          &lt;img srcset="" src="new-york-city-wallpapers-mob.jpeg" alt="" /&gt;
      &lt;/picture&gt;
        &lt;div class="info"&gt;
        &lt;h1&gt;The new Galaxy S7 edge | Galaxy S7&lt;/h1&gt;&lt;/br&gt;
        &lt;h2&gt;Go dipper into Samgung's brightest new stars-available now-and&lt;/h2&gt;&lt;/br&gt;
        &lt;h2&gt;learn all about our limited-time special offers.&lt;/h2&gt; 
        &lt;/div&gt;`enter code here`
  
  &lt;/div&gt;
  </code></pre>