twitter-bootstrap Bootstrap 标头/超大屏幕背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28679841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap header/jumbotron background image
提问by Elliott Davidson
I'm messing around with Bootstrap for the first time and was struggling to get an image as the background for a header that included the nav and jumbotron. Currently the image I've set isn't showing up and I'm not sure why. If you could point me in the right direction as to where or what needs to change it would be appreciated.
我第一次使用 Bootstrap 并且正在努力获取图像作为包含导航和超大屏幕的标题的背景。目前我设置的图像没有显示，我不知道为什么。如果您能指出我需要改变的地方或内容的正确方向，我将不胜感激。
<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;
}
采纳答案by Elliott Davidson
background: url("../img/elliott-davidson-slider.jpg");
By – Yerko Palma
作者 – 耶科·帕尔马
回答by jph
Try adding "background-image" like so:
尝试像这样添加“背景图像”：
.header-bg {
width:100%;
height:475px;
background-image: url("img/elliott-davidson-slider.jpg");
background-size:cover;
}
