Half page background image

Bootstrap 5 Half page background image component

Responsive Half page background image built with Bootstrap 5. Tutorial on how to make a half-page background image in 3 steps.

Basic example

  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: 50vh means 50% of available height.)
  3. Add .bg-image class to scale the image properly and enable responsiveness.
Demo
Edit in sandbox 
        
            
          <!-- Background image -->
          <div
            class="bg-image"
            style="
              background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/images/77.webp');
              height: 50vh;
            "
          ></div>
          <!-- Background image -->

This is a very useful design that is often used in many landing pages.

Demo