title: Set Background image width 100% height auto
body: <p>I have a banner section as such:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bannerImage {
      width: 100%;
      height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So instead of using background image, I am using an image with <code>width</code> <code>100%</code> and <code>height</code> <code>auto</code>.</p>
  
  <p>Now I want to add a banner title over the banner section. So, since it is not possible to achieve the effect with just image, I am using <code>background-image</code> property now. But with background image I want the same layout like how it was with just image. The background should always take width 100% and height should be auto. Below is my approach. As you can see the section adjusts to height of content. Is it possible to set it's height to image's height.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg_banner_image {
      background-size: 100% auto;
      background-position: center top;
      background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"&gt;some content here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>