bootstrap - 顶部带有导航栏的完整背景图片

Question

我正在尝试创建一个带有浮动在图像顶部的导航栏的完整背景图像页面。

我遇到一个问题，导航栏将图像向下推，图像设置在 html 元素的背景上，所以我不知道为什么导航栏会产生这种效果。

我只是在 bootstrap 入门页面直接使用 css，没有导航栏，图像适合整个页面，导航栏位于图像上方并将其向下推：

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>

我想要的最终效果是整个页面的图像和导航栏，图像显示在其下方，而不是将图像向下推，因此它在导航栏之后开始。

Answer 1

为 body 标签提供背景。

html{

         height: 100%;
         width: 100%;

       }
        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;
              /* This image will be displayed fullscreen */
            background:url('http://www.radioviva.fm.br/images/backgrounds/bg-squares-dark.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;
        }

        }

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <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>

Answer 2

将以下 2 行 CSS 应用到 的主体 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;
        }

Answer 3

将您的背景添加到正文中 - 而不是 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;
}

看这里：http://codepen.io/anthu/full/KVeOyV/

bootstrap - 顶部带有导航栏的完整背景图片

bootstrap - full background image with nav bar over the top

css

background-image

navbar

twitter-bootstrap