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