htmlbootstrap-5

Background image in Bootstrap

I'm trying to get my head round Bootstrap background images. Can anyone help on the right syntax for displaying a background image when the file is local. Specifically I've got two alternative lines in my page html

<body class ="bg-image" style="background-image: 
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image: 
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">

The first one works and the second local one doesn't. Any corrections greatly appreciated.

Solution

  • Full page background image

    we can easily make this background image to cover the full available space and make it a full-page background image.

    Just replace height: 400px; with height: 100vh;

    vh stands for viewport height.

    height: 100vh; means 100% of available height.

    <!-- 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.

    For More Information: https://mdbootstrap.com/docs/standard/content-styles/background-image/