web-dev-qa-db-ja.com

ナビゲーションバーの背景画像の設定-bootstrap

フォルダー 'img/flower.jpg'から背景画像を設定できません。 CSSで次のコードを使用してみましたが、画像が表示されません。ただし、インターネットのソースから参照すると機能します。

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

デモ

csstwitter-bootstrapbackgroundnavigationbackground-image
5
user21

これは、画像とスタイルファイルのフォルダー構造を表示できる場合、または可能であれば、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*/
    }
11
Manoj Kumar

background-image：url（ '/ img/flower.jpg'）;

background-image：url（ ' http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg '）;

2
wijaya