web-dev-qa-db-fra.com

Définition de l'image d'arrière-plan d'une barre de navigation - bootstrap

J'ai des problèmes pour définir l'image d'arrière-plan du dossier "img/flower.jpg". J'ai essayé d'utiliser le code suivant en CSS, l'image ne s'affiche pas: Cependant, cela fonctionne si je la référence à partir d'une source 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;
}

Démo

csstwitter-bootstrapbackgroundnavigationbackground-image
5
user21

Cela peut être mieux si vous pouvez afficher la structure de votre dossier pour les images et le fichier de style ou si possible donner le dossier url.votre fichier img devrait être dans le même répertoire dans lequel votre fichier de style existe. Ensuite cela fonctionnera.

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

ou s'il se trouve dans un autre répertoire, trouvez le chemin en utilisant ../. cela signifie que vous êtes un pas en arrière par rapport au répertoire. comme ça

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

image de fond: url ('/ img/flower.jpg');

image d'arrière-plan: url (' http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg ');

2
wijaya