Setting background image of a navigation bar - bootstrap

问题

I have problem setting the background image from folder, 'img/flower.jpg'. I tried using the following code in CSS, the image does not show up: However it works if I reference it from a source in internet.

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



<div class="container">
<!-- Navigation -->
  <nav class="navbar navbar-default " id="navigation" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            Jeen's Portfolio 

        </div> 
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav> 
</div>

/* CSS used here will be applied after bootstrap.css */
#navigation,.navbar .navbar-default{
  border-top: 2px dotted blue;
  border-bottom: 2px dotted blue; 
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg");

  background: url('http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');
 font-style: zapfino;
}

Demo

回答1:

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*/
    }

回答2:

background-image: url('/img/flower.jpg');

background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');

来源：https://stackoverflow.com/questions/29619346/setting-background-image-of-a-navigation-bar-bootstrap