设置导航栏的背景图片 - 引导 [英] Setting background image of a navigation bar - bootstrap

问题描述

我有问题的文件夹，IMG /为Flower.jpg'设置背景图片。
我试着用CSS中的以下code，图像显示不出来：但是它的工作原理，如果我从互联网来源引用它。

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;
}

演示

推荐答案

这可以更好，如果你能证明你的文件夹结构的图像和样式文件，或者可能给url.your IMG文件夹应该是在同一个目录下它自己的风格文件存在。那么这会工作。

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

这篇关于设置导航栏的背景图片 - 引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！