设置导航栏的背景图像 - bootstrap

时间:2015-04-14 04:46:27

标签: css twitter-bootstrap background navigation background-image

我从文件夹'img / flower.jpg'设置背景图片时遇到问题。 我尝试在CSS中使用以下代码,图像没有显示:但是如果我从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

2 个答案:

答案 0 :(得分:11)

如果您可以显示图像和样式文件的文件夹结构,或者如果可能,请将url.your img文件夹放在样式文件所在的同一目录中,这样可以更好。这样就可以了。

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

或者如果它在某个其他目录中,则使用../找到路径。这表示你离目录只有一步之遥。 像这样

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

答案 1 :(得分:2)

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

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