How to Add a Background Image using Bootstrap 5 ?
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/bootstrap@5.3.0/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.w3wiki.net/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;" > w3wiki </ 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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ 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 > <!-- Bootatrap CSS CDN --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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.w3wiki.net/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;" > w3wiki </ 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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ script > </ body > </ html > |
Output: