Bootstrap 5 Background Image - Examples & Tutorial

How it works

You can easily set the background image in each HTML element by adding a single line of CSS:

Show code Edit in sandbox

• CSS

style="background-image: url('');

Inside of the url('') we need to provide a link to our image.

If you want to use the image on your computer, the path should look like this:

Path	Description
img src="picture.webp"	The "picture.webp" file is located in the same folder as the current page
img src="images/picture.webp"	The "picture.webp" file is located in the images folder in the current folder
img src="/images/picture.webp"	The "picture.webp" file is located in the images folder at the root of the current web
img src="../picture.webp"	The "picture.webp" file is located in the folder one level up from the current folder

You can also use an absolute path and add a link to the image directly from the Internet.

Show code Edit in sandbox

• HTML

<!-- Background image --> <div style="background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');"></div> <!-- Background image -->

Then we just need to add this CSS line to the HTML element.

Show code Edit in sandbox

• HTML

<!-- Background image --> <div style="background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');"></div> <!-- Background image -->

However, despite this, our picture does not appear. Take a look at the demo:

Demo

That's because we need to provide a height to this HTML element. Let's add height: 400px; to set a height.

Show code Edit in sandbox

• HTML

<!-- Background image --> <div style=" background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'); height: 400px; " ></div> <!-- Background image -->

Now it works ... partially. We see the picture, but it is cut and unsightly.

Click on the images to launch the live demo.

Fortunately, there is a class in MDBootstrap that fixes this issue. Just add .bg-image to the class and you will see the problem magically disappear.

Show code Edit in sandbox

• HTML

<!-- Background image --> <div class="bg-image" style=" background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'); height: 400px; " ></div> <!-- Background image -->