Bootstrap header/jumbotron背景图片

我第一次使用Bootstrap搞乱了图像，并且努力得到一个图像作为包含nav和jumbotron的标题的背景。目前我设定的图像没有显示，我不知道为什么。如果您可以指出我需要改变的地方或需要改变的方向，我们将不胜感激。Bootstrap header/jumbotron背景图片

enter image description here

<div class="container header-bg"> 
    <nav class="navbar" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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="#">Elliott Davidson</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav pull-right"> 
       <li><a href="#about">About</a></li> 
       <li><a href="#about">Pictures</a></li> 
       <li><a href="#about">Videos</a></li> 
       <li><a href="#about">Sponsors</a></li> 
       <li><a href="#about">Blog</a></li> 
       <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
    <div class="jumbotron"> 
     <div class="container"> 
     <h1>Elliott Davidson</h1> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
     </div> 
    </div> 
</div> 

    .header-bg { 
     width:100%; 
     height:475px; 
     background: url("img/elliott-davidson-slider.jpg"); 
     background-size:cover; 
    } 

    .jumbotron { 
     color: white; 
     text-shadow: black 0.3em 0.3em 0.3em; 
     background: transparent; 
    }

来源

2015-02-23 Elliott Davidson

什么是你目前的问题？你说了你想要的，但它会帮助，如果你说你现在正在得到什么 – 2015-02-23 17:43:43

图像不显示对不起，将更新发布 – 2015-02-23 17:44:37

一个屏幕截图也会很好 – 2015-02-23 17:45:25

background: url("../img/elliott-davidson-slider.jpg");

通过 - Yerko绘制帕尔马

来源

2015-02-24 11:55:53

尝试增加 “背景图片”，例如：

.header-bg { 
    width:100%; 
    height:475px; 
    background-image: url("img/elliott-davidson-slider.jpg"); 
    background-size:cover; 
}

来源

2015-02-23 17:49:10 jph

不幸的是，它没有奏效。 – 2015-02-23 17:50:38

Bootstrap header/jumbotron背景图片

回答

相关问题