How to Add a Background Image using Bootstrap 5 ?
Last Updated :
13 Feb, 2024
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:
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>
<link rel="stylesheet" href=
</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:
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>
<script src=
</script>
</body>
</html>
|
Output:
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>
<link rel="stylesheet" href=
<title>Example 2</title>
</head>
<body>
<div class="container">
<div class="card border-5 border-danger"
style=
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>
<script src=
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...