How to add a background image to my navigation bar in bootstrap?
May 31, 2022Hi 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.
- Add bootstrap 5 links and scripts for installation
- Create navbar using
nav
tag and bootstrap navbar classs. - Use
background-image
,background-size
, andmin-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.
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.
All the best 👍