How to Add a Background Image using Bootstrap 5 ?

Last Updated : 24 Apr, 2025

Bootstrap 5 is one of the alternatives for CSS styling of the elements. Rather than defining the separate properties for the elements, we can directly apply the Bootstrap 5 classes for more attractive styling of the elements. We can add a background image to the application in Bootstrap 5 using various approaches as listed below:

Table of Content

Using bg Utility Class
Using Card Utility Class

Using bg Utility Class

In this approach, a Bootstrap 5 utility class named bg class is used to set a background image, and additional inline styles control its size and position.

Syntax:

<div class="bg" style="background-image: url('img);"></div>

Example: The below example describes adding a background image using the bg Utility Class in Bootstrap 5.

HTML

<!DOCTYPE html>

<head>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body class="bg-primary">
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-12">
                <div class="bg"
                    style="background-image: 
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
                        background-size: cover; 
                        background-position: center; 
                        height: 100vh;">
                    <div class="d-flex flex-column justify-content-center 
                                align-items-center h-100 text-center text-white">
                        <h1 class="display-2" 
                            style="font-weight: bold; color:black;">
                            GeeksforGeeks
                        </h1>
                        <h2 class="display-6" 
                            style="font-weight: bold; color:red;">
                            <b>Using bg Utility Class</b>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap JavaScript CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</body>

</html>

Output:

Screenshot-2024-02-10-at-22-07-49-Screenshot

Using Card Utility Class

In this approach, we are using the Bootstrap 5 Card component with custom styling like border-5 and border-danger. The background image is been embedded in the Card component using its styling properties. This created a Card-live layout with the background image in the application.

Syntax:

<div class="card border-5 border-danger" 
         style="background-image: url('img');">
</div>

Example: The below example describes adding a background image using the Card Utility Class in Bootstrap 5.

HTML

<!DOCTYPE html>

<head>
    <!-- Bootatrap CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
    <title>Example 2</title>
</head>

<body>
    <div class="container">
        <div class="card border-5 border-danger"
            style=
"background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png');
            background-size: cover; 
            background-position: center; 
            height: 100vh;">
            <div class="card-body">
                <h1 class="card-title text-center" style="color: green;">
                    GeeksforGeeks
                </h1>
                <h1 class="card-title text-center">
                    Using Card Utility Class
                </h1>
            </div>
        </div>
    </div>
    <!-- Bootstrap JavaScript CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</body>

</html>

Output:

Screenshot-2024-02-10-at-22-20-46-Background-Image-Example

How to Add filter to the background image using CSS?

gauravggeeksforgeeks

Improve

Article Tags :

How to Add a Background Image using Bootstrap 5 ?

Using bg Utility Class

Syntax:

Using Card Utility Class

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?