Fullscreen background image

Bootstrap 5 Fullscreen background image component

Responsive Fullscreen background image built with Bootstrap 5. Thanks to this tutorial, you will learn how to use this functionality without any problems.

Basic example

This is a basic example of a fullscreen background image.

  1. Add background-image via inline CSS.
  2. Define the background height. In the example below we use vh units, which stands for "viewport height" (height: 100vh means 100% of available height.)
  3. Add .bg-image class to scale the image properly and to enable responsiveness
  4. You can easily set the background image in each HTML element by adding a single line of CSS: style="background-image: url('');
  5. Inside the url('') we need to provide a link to our image.
Demo
Edit in sandbox 
        
            
                <!-- Background image -->
                <div class="bg-image" 
                     style="background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'); height: 100vh;">
                </div>
                <!-- Background image -->

Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.

Demo