<div class="jumbotron jumbotron-fluid bg-dark">
  
  <div class="jumbotron-background">
    <img src="https://placeimg.com/2000/1000/nature" class="blur ">
  </div>

  <div class="container text-white">

    <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>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

  </div>
  <!-- /.container -->
  
 
</div>
<!-- /.jumbotron -->

<!-- 
For IE support of object-fit add this to your document
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"&gt;&lt;/script&gt;
-->


.jumbotron {
  position:relative;
  overflow:hidden;
}

.jumbotron .container {
  position:relative;
  z-index:2;
  
  background:rgba(0,0,0,0.2);
  padding:2rem;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:3px;
}

.jumbotron-background {
  object-fit:cover;
  font-family: 'object-fit: cover;';
  position:absolute;
  top:0;
  z-index:1;
  width:100%;
  height:100%;
  opacity:0.5;
}

img.blur {
	-webkit-filter: blur(4px);
	filter: blur(4px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');

}
$(function () { objectFitImages() });

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js