CSS - BS - Jumbotron

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

<style>
.jumbotron {
  padding: 0;
  background-image: url("http://kappabar.se/wp-content/uploads/2017/11/Gamezone-1024x683.jpg");
  background-position: center;
  color: #FFF;
}
.jumbotron-darken {
  padding: 5rem 2rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
</style>

<div class="jumbotron jumbotron-fluid">
  <div class="jumbotron-darken">
    <div class="container">
      <h1 class="display-4">
        Tja
      </h1>
      <p class="lead">
        Hej hej
      </p>
    </div>
  </div>
</div>

@media (min-width: 768px) { 
  .jumbotron-darken {
      padding: 8rem 2rem;
    }
  }
}

    @media (min-width: 970px) {
      .jumbotron-darken {
          padding: 15rem 2rem;
        }
      }
    }