Bootstrap 4 Background image

Bootstrap 4 Background image component

Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.

Basic Bootstrap 4 version

Demo
Edit in sandbox 
        
            
      <body>
        <div class="bg"></div>
    
        <p class="py-5 text-center">This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
    </body>
    
      
        
    
        
            
      body, html {
        height: 100%;
      }
      .bg {
        /* The image used */
        background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).webp");
      
        /* Full height */
        height: 100%;
      
        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

Above is an example template for a Background image in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Demo
Edit in sandbox 
        
            
      <!-- Background image -->
      <div
      class="bg-image"
      style="
        background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/images/76.webp');
        height: 100vh;
      "
      ></div>
      <!-- Background image -->