Bootstrap 3 - Jumbotron image d'arrière-plan

Je vais avoir de la difficulté à mettre une image de fond pour bootstrap jumbotrons. Mon principal.css vient après le bootstrap css et je suis en sélectionnant le jumbotron à l'aide d'une classe appelée "bannière" qui est dans la même div que le jumbotron, mais cela ne fonctionne toujours pas. Voici mon code...

HTML:

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

CSS:

 .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;
}