How to Use Header with Background Image in Bootstrap 5

In this tutorial, we’ll learn how to create a header with a background image in Bootstrap 5.

Starting Bootstrap 5 Structure with CDN

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 5 Header with Background Image</title>
    <!-- content -->

Bootstrap 5 Header with Background Image

To create a header with a background image in Bootstrap 5, you need to apply some custom CSS for styling.

  <div class="header-content">
      <h1 class="header-title">Welcome to Our Site</h1>
      <p class="header-subtitle">Explore our world of Bootstrap designs</p>
      <a href="#content" class="btn btn-primary">Discover More</a>

<div id="content" class="container my-5">
  <h2>Main Content</h2>
  <p>This is the main content of the page. You can add more sections or content here as per your requirement.</p>
  <!-- Add more content here -->

CSS Styles

header {
    background: url("") no-repeat center center;
    background-size: cover;
    height: 60vh;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

.header-content {
    max-width: 600px;

.header-title {
    font-size: 3rem;
    margin-bottom: 20px;

.header-subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
header with background image in bootstrap 5

Bootstrap 5 Header with Image using Minimal Custom CSS

This header uses a full-width background image with text and a button centered. It utilizes Bootstrap’s utility classes for layout and spacing.

<div class="header-background d-flex align-items-center justify-content-center text-white text-center">
      <h1>Welcome to Our Website</h1>
      <p class="lead">Explore the world of Bootstrap</p>
      <a href="#content" class="btn btn-primary">Learn More</a>

<!-- Main Content -->
<div id="content" class="container my-5">
  <h2>Main Section</h2>
  <p>This is the main content of your page.</p>

CSS Styles

.header-background {
    background: url('') no-repeat center center / cover;
    height: 60vh;
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Share link