<div class="jumbotron jumbotron-billboard">
  <div class="img"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h2>Jumbotron</h2>
                <p>
                    Lorem ipsum is the best
                </p>
                <a href="#" class="btn btn-success btn-lg">Sign Up</a>
            </div>
        </div>
    </div>
</div>
.jumbotron-billboard .img {
    margin-bottom: 0px;
    opacity: 0.2;
    color: #fff;
    background: #000 url("https://bootstrapcreative.com/wp-bc/wp-content/uploads/2017/03/learning-story.png") top center no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
.jumbotron h2 {margin-top:0;}
.jumbotron {
  position:relative;
  padding-top:50px;
  padding-bottom:50px;
}
.jumbotron .container {
  position:relative;
  z-index:2;
}

@media screen and (max-width: 768px) {
  .jumbotron {
    padding-top:20px;
    padding-bottom:20px;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js