title: How to make an image take up an entire div height and width?
body: <p>I have the following header element defined:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-xs-12"&gt;
              &lt;h3 class="heading"&gt;Heading info here&lt;/h3&gt;
              &lt;p&gt;...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 hidden-xs header-image"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with this style: </p>
  
  <pre><code>.header-image {
      background-image: url("../img/email.jpg");
  }
  </code></pre>
  
  <p>but the image isn't taking up the whole of the div, in fact, when I look at it in Chrome Inspector it has a height of 1px and a width of 380px</p>
  
  <p>How do I make it take up the whole width and height of the div without padding or margins?</p>