title: Responsive background image of div
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="page-header"&gt;
                  &lt;div class="masthead"&gt;
                      &lt;div class="header-image"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Which is using Bootstrap 3.3.
  I want to set a header image which will be used as a banner and will be responsive as much it possible.
  I set <code>header-image</code>class and I gave it these properties:</p>
  
  <pre><code>.header-image {
      background-image: url("../images/amazingimage.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
  }
  </code></pre>
  
  <p>But I can't see the image at all.
  Please help me, thanks.</p>
  
  <p>UPDATE:
  <strong>Here is a fiddle: <a href="http://jsfiddle.net/qnsnnf9s/" rel="nofollow noreferrer">http://jsfiddle.net/qnsnnf9s/</a></strong></p>