Bootstrap 3 - Jumbotron background image
<p>I am having trouble setting a background image for bootstrap jumbotrons. My main.css comes after the bootstrap css and I am selecting the jumbotron using a class called "banner" which is in the same div as the jumbotron, but it still doesn't work. Here is my code...</p>

<p>HTML:</p>

<pre><code>  &lt;!-- Banner --&gt;
  &lt;div class="jumbotron banner"&gt;
    &lt;div class="container"&gt;
      &lt;hgroup&gt;
        &lt;h1&gt;
          Bits king
        &lt;/h1&gt;
        &lt;h2&gt;
          Web Design &amp;amp; Development
        &lt;/h2&gt;
      &lt;/hgroup&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code> .banner {
  height: 400px;
  width: 100%;
  max-height: 50%;
  max-width: 100%;
  min-height: 20%;
  min-width: 30%;
  background-image: url("../assets/images/banner.jpeg");
  background-size: cover;
}
</code></pre>