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.
background-imagevia inline CSS.
Define the background height. In the example below we use
vhunits, which stands for "viewport height" (
height: 50vhmeans 50% of available height.)
.bg-imageclass to scale the image properly and enable responsiveness.
<!-- 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.