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

May 31, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to add a background image to my navigation bar in bootstrap.

To add a background image to my navigation bar, put the .navbar-inner class and add a background image to my navigation bar.

Bootstrap Add Background Image In Navbar– Sometimes we need to add background image to the navigation bar in bootstrap. There are many ways to do this, here in this tutorial we are going to add the background image with the help of existing class and adding some custom style to it.

Table of contents

Includes bootstrap view
Includes bootstrap library
Includes css in html page
Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Step 3: Includes css in html page

Here we are using in css class to add on background image navbar in bootstrap .

.navbar-inner{
  background-image: url("image/coconut-tree.jpg");
  background-repeat: no-repeat;
}

Step 4: Define its class name

You can add the background image to the navbar using the class .navbar-inner Simply as below

After that, create a background image to my navigation bar with a class name .navbar-inner.

    <h1 class="text-center text-danger"> aGuideHub</h1>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-inner">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarcollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarcollapse">
            <ul class="navbar-nav justify-content-between w-100">
                <li><a href="#" class="nav-link active">Home</a></li>
                <li><a href="#" class="nav-link">Services</a></li>
                <li><a href="#" class="nav-link">Downloads</a></li>
                <li><a href="#" class="nav-link">Projects</a></li>
                <li><a href="#" class="nav-link">About Us</a></li>
                <li><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </div>
    </nav>

    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
    .navbar-inner{
  background-image: url("image/coconut-tree.jpg");
  background-repeat: no-repeat;
} 
    </style>
    <title>Bootstrap</title>
</head>

<body>

    <h1 class="text-center text-danger "> aGuideHub </h1>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-inner">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarcollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarcollapse">
            <ul class="navbar-nav justify-content-between w-100">
                <li><a href="#" class="nav-link active">Home</a></li>
                <li><a href="#" class="nav-link">Services</a></li>
                <li><a href="#" class="nav-link">Downloads</a></li>
                <li><a href="#" class="nav-link">Projects</a></li>
                <li><a href="#" class="nav-link">About Us</a></li>
                <li><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </div>
    </nav>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

Check the output of the above code example.

All the best 👍

GuideHub’s Newsletter

Discussion about this post

Ready for more?