title: Bootstrap 3 - Jumbotron background image
body: <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>