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
- Add
background-image
via inline CSS. -
Define the background height. In the example below we use
vh
units, which stands for "viewport height" (height: 50vh
means 50% of available height.) -
Add
.bg-image
class to scale the image properly and enable responsiveness.
This is a very useful design that is often used in many landing pages.