Fullscreen background image
Bootstrap 5 Fullscreen background image component
Responsive Fullscreen background image built with Bootstrap 5. Thanks to this tutorial, you will learn how to use this functionality without any problems.
This is a basic example of a fullscreen background image.
background-imagevia inline CSS.
- Define the background height. In the example below we use
vhunits, which stands for "viewport height" (
height: 100vhmeans 100% of available height.)
.bg-imageclass to scale the image properly and to enable responsiveness
- You can easily set the background image in each HTML element by adding a single line of CSS:
- Inside the url('') we need to provide a link to our image.
<!-- Background image --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'); height: 100vh;"> </div> <!-- Background image -->
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.