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.
          <!-- Background image -->
              background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/images/77.webp');
              height: 50vh;
          <!-- Background image -->

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