Bootstrap Background Image

by jwpg018241

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page Wrapper -->
<div style="background: url(https://bootstrapious.com/i/snippets/sn-bg-image/bg.jpg)" class="page-holder bg-cover">

  <div class="container py-5">
    <header class="text-center text-white py-5">
      <h1 class="display-4 font-weight-bold mb-4">Bootstrap Background Image</h1>
      <p class="lead mb-0">Create a responsive full-page background image window using Bootstrap 4.</p>
      <p class="font-italic">Snippet By <a href="https://bootstrapious.com" class="text-white">
          <u>Bootstrapious</u></a>
      </p>
    </header>

    <div class="text-white">
      <p class="lead">It's not a good approch to deal directly with <code class="bg-white px-2 py-1 rounded">body</code> So, create a wrapper container and make it a full-window height.</p>
      <p class="lead">Set the wrapper initial height to full window height using <code class="bg-white px-2 py-1 rounded">min-height: 100vh</code></p>
      <p class="lead">Use <code class="bg-white px-2 py-1 rounded">.bg-cover</code> to make the background fit all viewports.</p>
    </div>

  </div>
</div>
<div style="background: url(https://bootstrapious.com/i/snippets/sn-bg-image/bg.jpg)" class="page-holder bg-cover"></div>

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.page-holder {
  min-height: 100vh;
}

.bg-cover {
  background-size: cover !important;
}