How to add a background image to my navigation bar in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To set image as background in bootstrap navbar, you can use background-image css property with url() function and pass your image path in url() the image will show as a background image in menu bar.

See short example to add image on navigation bar using css you can also below soltion in plain html.

.nav-background {
    background-image: url("./images/navigation.jpg");
    background-size: cover;

    /* Workaround for some mobile browsers */
    min-height: 100%;
}

Try to use different images for mobile devices.

In this article, we will first install bootstrap 5 in html page, create bootstrap navbar ( header bar ) then use above css example to put image behind navigation bar.

Let’s start the tutorial how to add background image to navbar in bootstrap?

Bootstrap installation

First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

Add below CSS link in your head tag to install the bootstrap 5 library

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

and javascript scripts in your body tag.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Put the below javascript scripts in your body tag if you planning to use dropdowns, popovers, or tooltips in your project.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Example of bootstrap navbar background image responsive

In this example, we will do following things.

  1. Add bootstrap 5 links and scripts for installation
  2. Create navbar using nav tag and bootstrap navbar classs.
  3. Use background-image, background-size, and min-height to add image in navigation bar
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <style>
      .nav-background {
        background-image: url("./images/navigation.jpg");
        background-size: cover;

        /* Workaround for some mobile browsers */
        min-height: 100%;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark nav-background">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">aGuideHub</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
          <span class="navbar-text">
            Navbar text with an inline element
          </span>
        </div>
      </div>
    </nav>
  </body>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"
  ></script>
</html>

The output of the above program of how to insert image in navbar bootstrap example.

Bootstrap, Navbar, Image

Here, we are provided code sandbox links for the above program for the navigation bar background image example. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts