Hey there, fellow developers! 👋 Have you ever wanted to spice up your Bootstrap 5 components with background images?
Whether it’s for tables, accordions, or even modals, adding a background image can elevate the aesthetics of your project. Today, we’re diving into the how-to for adding background images to various Bootstrap 5 components.
Let’s not just settle for basics—we’ll also explore advanced CSS selectors, HTML5 elements, and neat tricks to make your design pop. Ready? Let’s go!
Why Use Background Images?
Back when I started designing websites, I relied solely on colors for styling. One day, a client said, “Can we add some depth to this design?” That’s when I realized the power of background images. They can add texture, emotion, and personality to even the most ordinary components.
Step 1: Setting Up the Basics
Start with the Bootstrap 5 boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Background Images</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* General styles for examples */
.bg-custom {
background: url('img/bg.jpeg') no-repeat center center/cover;
}
</style>
</head>
<body>
<div class="container my-5">
<h1>How to Add Background Image in Bootstrap 5</h1>
<p>Explore how to apply background images to Bootstrap components with practical examples!</p>
</div>
</body>
</html>Step 2: Adding Background Images to Bootstrap Components
Let’s explore how to apply background images to different Bootstrap components, one by one.
1. Background Image in Tables
1st let’s update the styles.
.table {
--bs-table-bg: transparent;
}Now, the HTML:
<!-- Tables -->
<table class="table table-dark bg-custom">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jane</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>34</td>
</tr>
</tbody>
</table>
<!-- Tables -->and here’s how it looks.
2. Background Image in Accordions
Now, let’s try accordions
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body bg-custom">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body bg-custom">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body bg-custom">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>Now, this is how the output looks like.
3. Background Image in Alerts
Now, let’s add the alert.
<div class="alert bg-custom text-white alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> This is how it looks.
4. Background Image in Breadcrumbs
Okay, now let’s try breadcrumbs
<nav class="bg-custom p-2">
<ol class="breadcrumb text-white m-0">
<li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>Now, this is how it looks. I know text doesn’t look great, but you can CSS that out.
5. Background Image in Buttons
Let’s try adding background image to the buttons.
<button class="btn btn-primary bg-custom text-white border-0">
Custom Background Button
</button>and it looks like this
6. Background Image in Cards
Now, let’s try adding backgrounds for the cards
<div class="card bg-custom text-white">
<div class="card-body">
<h5 class="card-title">Card with Background Image</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>and it looks like this
7. Background Image in Collapse
Now, let’s try for collapse
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button">
Toggle Collapse
</a>
<div class="collapse my-3" id="collapseExample">
<div class="card bg-custom card-body">
This is some hidden content.
</div>
</div>and it looks like this
8. Background Image in Dropdowns
Now, let’s try for Dropdowns
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown Button
</button>
<ul class="dropdown-menu bg-custom">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul> and it looks like this
9. Background Image in List Groups
Okay, let’s try for background list groups
<ul class="list-group bg-custom text-white">
<li class="list-group-item bg-transparent">Item 1</li>
<li class="list-group-item bg-transparent">Item 2</li>
</ul> and it looks like this
10. Background Image in Modal
Okay, let’s do the same for modals now
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-custom">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>and it looks like this.
11. Background Image in Navbar
Let’s see how to add the background image for the Navbar now.
<nav class="navbar navbar-expand-lg bg-custom">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">Navbar</a>
</div>
</nav>and it looks like this.
12. Background Image in Nav Tabs
Now, let’s try adding background images for tabs
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content bg-custom" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<p>Home</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptatibus vitae totam repellat in eveniet ipsam delectus dolores, ducimus harum ipsum vero excepturi, debitis neque, dignissimos sunt esse quam fugit.</p>
</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>and this is how it looks
13. Background Image in Offcanvas
Now, let’s try the same for Offcanvas
<div class="offcanvas offcanvas-start show bg-custom" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>and it looks like this
14. Background Image in Pagination
Let’s do the same for pagination now.
<nav aria-label="Page navigation example">
<ul class="pagination bg-custom d-inline-flex">
<li class="page-item"><a class="page-link opacity-75" href="#">Previous</a></li>
<li class="page-item"><a class="page-link opacity-75" href="#">1</a></li>
<li class="page-item"><a class="page-link opacity-75" href="#">2</a></li>
<li class="page-item"><a class="page-link opacity-75" href="#">3</a></li>
<li class="page-item"><a class="page-link opacity-75" href="#">Next</a></li>
</ul>
</nav>and it looks like this
15. Background Image in Popovers
Now, for Popovers, we need to write some additional styles and scripts. Let’s write the styles 1st:
<style>
.popover {
background-image: url(img/bg.jpeg);
background-size: cover;
}
h3.popover-header {
background-color: black;
color: white;
}
</style>Now the script below the Bootstrap js
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>and now finally the code
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>this is how it looks
Final Thoughts
Adding background images in Bootstrap 5 is a great way to customize your UI and make your components stand out. By combining Bootstrap classes with custom CSS, you can create unique and visually appealing designs.
Go ahead, experiment with these examples, and let me know how you used them in your projects. Happy coding! 🚀
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
