bootstrap - plein de l'image de fond avec la barre de navigation sur le dessus

Je suis en train de créer une image de fond de page avec une barre de navigation qui flotte sur le dessus de l'image.

J'ai un problème en ce que la barre de navigation pousse l'image, l'image est définie sur l'arrière-plan de l'élément html donc je ne sais pas pourquoi la barre de navigation est d'avoir cet effet.

Je suis juste en utilisant le css directement du bootstrap page de prise en main et sans la barre de navigation de l'image s'adapte à l'ensemble de la page, avec la barre de navigation, il se trouve au dessus de l'image et le pousse vers le bas:

Css:

html{
            /* This image will be displayed fullscreen */
            background:url('bg.jpg') no-repeat center center;

            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;

            /* The Magic */
            background-size:cover;
        }

        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;           
        }

        .navbar {
            margin-top: 0px;
            margin-bottom: 0px;
        }

Html:

    <body>
    <div class="container">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>

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

L'effet que je veux à la fin, c'est une image de l'ensemble de la page et la barre de navigation sat avec l'image montrant sous elle, de ne pas pousser l'image vers le bas de sorte qu'il commence après la barre de navigation.

OriginalL'auteur berimbolo | 2016-02-01

  1. 5

    Appliquer les 2 lignes de CSS pour le corps au lieu de l'élément html:

     body {
            background:url('bg.jpg') no-repeat center center;
            background-size:cover;  

            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;
        }
    Salut merci, cela a fonctionné, pourquoi ne fait-il un travail sur le corps et pas le html?
    Il y a un bon article ici sur les différences . Il devrait vous fournir une réponse détaillée (mieux que je peux dans un commentaire court 🙂 ): css-tricks.com/html-vs-body-in-css
    Merci pour l'aide, et pour la page web trop!
    Vous êtes les bienvenus 🙂

    OriginalL'auteur pivemi

  2. 2

    Ajouter votre arrière-plan pour le corps - pas de html

    body {
  /* Workaround for some mobile browsers */
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  padding-top: 20px;
  padding-bottom: 20px;
}

    voir ici: http://codepen.io/anthu/full/KVeOyV/

    OriginalL'auteur anton