Setting Background Image of a Navigation Bar - Bootstrap

How do I use image for nav background in Bootstrap 4

You can apply a background image to your bootstrap navbar by adding a background-image style to the div surrounding your navbar.

Here are the attributes you can apply to your image:

background-image: url("[file-location].png");
background-repeat: ;/* Determine what direction the image will repeat */
background-position: ; /* Where the image will be positioned relative to "top, right, bottom, and/or left */
background-attachment: ; /* use with "fixed" to make it scroll with page */

Read more about this property at W3Schools.

If the background image is making your hyperlink hard to read, change its normal color using color: [hex value / color name]; on nav-item or nav-link like this:

.nav-item > a {
  color: #000000; /* [hex value / color name] */
}

Then you can change the color of the link when you hover over it by using the following:

.nav-item > a:hover {
  color: red; /* [hex value / color name] */
}

Setting background image of a navigation bar - bootstrap

This can better if you can show your folder structure for the images and the style file or if possible give the url.your img folder should be in same directory in which your style file exists .then this will work .

#navigation,.navbar .navbar-default{
  background-image: url("img/flower.jpg");
}

or if it is in some other directory find the path with the use of ../ . this denote that you are one step back from the directory .
like this

#navigation,.navbar .navbar-default{
      background-image: url("../img/flower.jpg"); /* assuming img folder is one step back from css*/
    }

bootstrap - how to put your navbar on top of your background image?

Bootstrap 4

The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap 3

Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem

  <nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
    <div class="container">
        <div class="navbar-header">
      <a href="#" class="navbar-brand">Brand</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-bars"></i>
      </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
           <a href="#">Link</a>
          </li>
        </ul>
      </div>        
    </div>
  </nav>

---

This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4

Place a background image just below the navbar bootstrap-4 Beta

Set background-position: center 56px; where 56px is the height of navbar:

header#MyHeaderControl{   height: 100vh;  width: 100%;  background-image:url("https://images.pexels.com/photos/1055297/pexels-photo-1055297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");  background-repeat: no-repeat;  background-position: center 56px;  background-size: cover;     -webkit-background-size: cover;    -moz-background-size:cover;    -o-background-size:cover;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">    <div class="navbar-nav">      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>      <a class="nav-item nav-link" href="#">Features</a>      <a class="nav-item nav-link" href="#">Pricing</a>      <a class="nav-item nav-link disabled" href="#">Disabled</a>    </div>  </div></nav><!-- Background image--><header class="" id="MyHeaderControl"> </header>

How to override navbar over the background image?

This should work.
Add this code in you css header{width:100%;}.

body{    background-image: url(https://besthqwallpapers.com/Uploads/5-12-2018/73473/wooden-background-brown-tree-brown-background-wooden-pattern-vertical-lines.jpg);    background-size: cover;    display: flex;    flex-wrap: wrap;
}
header{  width:100%;}.navbar{     background-image: linear-gradient(to right, #916E34, #915D34, #914C34) !important;}

<!DOCTYPE html>

<html>    <head>        <title>Who am I?</title>        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">        <link rel="stylesheet" type="text/css" href="page_style.css">    </head>    <body>        <header>            <nav class="navbar navbar-dark bg-dark bg-custom">              <a class="navbar-brand" href="#">                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Icon-round-Question_mark.svg/600px-Icon-round-Question_mark.svg.png" width="30" height="30" class="d-inline-block align-top" alt="question mark">                Who am I?              </a>            </nav>            <nav class="navbar navbar-expand-lg navbar-light bg-light">              <a class="navbar-brand" href="#">Navbar</a>              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">                <span class="navbar-toggler-icon"></span>              </button>              <div class="collapse navbar-collapse" id="navbarNavDropdown">                <ul class="navbar-nav">                  <li class="nav-item active">                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>                  <li class="nav-item dropdown">                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                      Dropdown link                    </a>                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                      <a class="dropdown-item" href="#">Action</a>                      <a class="dropdown-item" href="#">Another action</a>                      <a class="dropdown-item" href="#">Something else here</a>                    </div>                  </li>                </ul>              </div>            </nav>        </header>        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>    </body></html>

Displaying background image below navigation bar

If you set your background-image for the body it will be covered by the navbar as the navbar is part of the body. Simply set your background-image for a new div:

PS: you can play around with the settings of background-position, background-size, etc. according to your needs. Here is a good link.

body {    margin: 0;    background: #353535;    font-family: 'Work Sans', sans-serif;    font-weight: 800;
}
.full-size-img {    background-image: url("https://via.placeholder.com/1150");    background-size: cover;    background-position: center;    background-repeat: no-repeat;    height: 100vh;}

        <header>            <div class="container">                <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->                    <nav>                    <ul>                        <li><a href="#">Home</a></li>                        <li><a href="#">About Us</a></li>                        <li><a href="#">Contact Us</a></li>                    </ul>                </nav>            </div>        </header>        <div class="full-size-img">
        </div>

Navbar on top of background image bootstrap 4.0

Use display:relative; to parent div and display:absolute; and top:0; to child(nav).

Whenever you need the logo(which is common use case) to put on the top without using the negative values then use, positions for parent and child, if there are no parent then the body will be considered as parent and it will positioned absolute to body.

You don't have to use negative value since the absolute will fit-in the image as expected for all instances.

fiddle to playaround.

.hero {
  height: 600px;
  background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
  background-position: center center;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

.masthead {
  display: relative;
}

nav {
  background: transparent;
  background-attachment: fixed;
  background-position: auto, center;
  position: absolute;
  top: 0;
}

.site-logo {
  height: 64px;
}

<div class="masthead">
  <nav>
    <img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
  </nav>
</div>
<div class="container-fluid hero"> </div>

Adding a background image just below the navigation bar

I've tried your code. Try changing this line:

#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
} 

to this:

#backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh; 
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
} 

and then add this to your css:

nav
{
overflow: auto;
}

Here's a proof that it works:

---

Related Topics